Manual de contenidos

buenosaires.gob.ar
Pautas para crear contenido orientado al vecino.

Vamos Buenos Aires

Introducción
El objetivo del manual es comunicar el estilo de contenidos de la web de la
Ciudad, para que todas las áreas de Gobierno estén alineadas en la
comunicación digital. Buscamos tener un contacto cercano con el vecino y que
su experiencia sea la mejor posible.

Esperamos que este manual forme parte de la redacción web de cada área
para lograr un contenido centrado en el usuario.

Drupal es el editor de contenidos de buenosaires.gob.ar. Es una plataforma

colaborativa donde varios usuarios pueden editar y modificar información, y
se adapta a cualquier dispositivo. El sistema está aprobado por el Gobierno
por su seguridad informática, que mantiene y resguarda el contenido de la
Ciudad.
Índice
Estilo General 1-2
- Cuerpo del texto 1
- Tono y leguaje 2
- Título y resúmenes 2
- Detectar qué problemas hay 2
- Logos y marcas 2

Plantillas 3-6
- Página de área 3
- Noticia 4
- Página 5
- Página de libro 6

Reportes de Google Analytics 7

Usos y convenciones 8-11

- Uso de la negrita y mayúsculas 8
- Uso de símbolos numerales 9
- Atajos y botones 9-10
- Menú institucional 10
- Redes sociales 10-11
- Enlaces 11
- Viñetas 11
- Procesos 11
- Uso de PDF 11

Imágenes, videos y banners 12-17

- Fotos e ilustraciones 12
- Videos 12
- Banners 13-15
- External links 16-17

Formularios y mapas 18-19

Chat 147 y trámites 20-21

Errores frecuentes 22
- Comunicación 22
- Imagen 22
- Tipo de contenido 22
- Estilo 22
- Técnicos 22

Cómo hacer más visible tu web 23

Anexo 24

Contactos 25
Estilo general
Tu contenido está listo para publicarse una vez que está claro ¿qué?, ¿cómo?,
¿cuándo? y ¿dónde? el vecino puede hacer algo con esa información.
Lo importante es el servicio que tu página ofrece al vecino.

Siempre tené en cuenta el contexto web en el que se ubica tu contenido y cómo

impacta en la estructura general (página de servicios, mapa de sitio, página de áreas
de Gobierno).

Cuerpo del texto

Formato principal: pirámide invertida, de mayor a menor interés para el usuario.

Oraciones: usá oraciones cortas, de 1 línea aproximadamente.

Párrafo: máximo 5 líneas, una idea por párrafo.

Priorizar: la brevedad y la información de servicio.

Anclas visuales: fotos cada 2 o 3 párrafos para que permita una lectura fácil y ágil.

Dinamismo: usá subtítulos, negritas, citas (textos destacados) y viñetas (si la lista
es muy larga). Así el usuario "escanea" y encuentra más rápido el contenido deseado.

Enlaces: incluí hipervínculos a otras páginas oficiales donde sea posible.

Glosario: explicá términos técnicos.

Tips: mostrá resultados, estadísticas, historias personales y ejemplos que

reflejen al vecino, para que se sienta identificado.

Revisá: errores gramaticales y ortográficos.

1
Tono y lenguaje

Tono: cercano y directo (“vos”). No uses imperativos. El tono informativo y formal es

exclusivo para comunicaciones de temas muy precisos, como noticias, que requieren
extrema claridad.

Mensaje: positivo y humano, que exprese un objetivo claro.

Comunicación: inclusiva, dando lugar a la interacción y participación.

Explicá términos o conceptos nuevos. Usá términos técnicos y abreviaciones
solamente cuando estés seguro de que los lectores sepan a qué se refieren.

Regla: no uses palabras en inglés, salvo nombres propios o términos específicos.

Títulos y bajadas

El título de una página debe tener relación con el título del enlace del que proviene
(atajo, external link, banner, destacado, tarjeta, etc.). Sólo la primera letra del título va
en mayúscula, excepto nombres propios. Los títulos deben ser cortos e informativos
y no llevan signos de puntuación.

Los títulos y bajadas deben explicar de qué se trata toda la página, de manera
breve y concisa. Menos es más, siempre. Buscá la forma más resumida de comunicar.

En los títulos de las páginas de área (ver página 3) tratá de usar la menor cantidad de
palabras posible, hablá como Gobierno y no como área, es decir, no uses
“subsecretaría” o “ministerio”, por ejemplo.

Si la frase del resumen tiene más de 2 líneas, se divide en 2 oraciones, buscando que
la información sea fácil y rápida de entender para el usuario.

Logos y marcas

No se permiten logos ni marcas de ningún tipo.

2
Plantillas
1- Página de área
¿Cuándo la usamos?
Para presentar un Ministerio, área o programa importante del Gobierno de la Ciudad.
Esta es la única plantilla cuya creación, edición y contenido está a cargo del Equipo de
Contenidos.
Header: foto,
título y bajada que
Componentes: presenta al área y
describe lo que hace.

Bajada: es un resumen
de la página, breve
y fácil de entender.
Puede transmitirse en
1ª persona. No usamos
“Subsecretaría”
o “Ministerio”, p. ej.

Menú: información
institucional del área;
misión, visión,
objetivos, leyes, etc.

Grilla de noticias:
últimas 3 noticias
publicadas.
Debe actualizarse al
menos una vez por
semana.

Atajos: pueden ser

hasta 4, mínimo 3.
Enlazan a los conteni-
dos más relevantes
para el usuario (pág 9).

Widget redes: en este

widget derecho ubica-
mos las redes sociales.

Colección de links:
es un widget que
agrupa external links,
y lleva título.

External links:
enlazan al contenido
más relevante para el
usuario, después de
los atajos.
Pueden presentarse
en forma de tarjeta
(foto, título y bajada),
o como listado de
hipervínculos.
3
2- Noticia
¿Cuándo la usamos?
Para comunicar avisos, novedades y eventos del área. Debe actualizarse como mínimo
1 vez por semana. Debe tener al menos 2 párrafos de 5 líneas de información y una foto.

Componentes: Título: 70 caracteres máx.

No uses signos de admiración, ni
de interrogación.
No escribas el título todo en
mayúsculas.

Resúmenes: 150 caracteres máx.

Son obligatorios y su contenido
indexa en las búsquedas de Google.
Son complemento del título,
explican de manera atractiva y
concisa el objetivo de la noticia.
No deben repetir información,
conceptos o palabras mencionadas
en el título.

Fotogalería: es obligatorio incluir al

menos una imagen. Será la portada
de la noticia. Se sugiere un número
par de imágenes para la galería: se
ve más prolijo.

Imagen inline: se utiliza para

facilitar la lectura del contenido. Se
sugieren hasta 3 imágenes inline
por noticia.
Deben tener 960 x 640 px. como
mínimo.

Dirección: si la noticia ocurrió en

un lugar específico, agregá esa
dirección al mapa.

4
3- Página
¿Cuándo la usamos?
Para transmitir información estática de poco volumen. Debe tener como mínimo 2
párrafos de 5 líneas de información y una imagen en la galería.

Componentes:
Los componentes y sus
características son como
los de las noticias.
La imagen inline en este caso
no es obligatoria, pero sirve
para acompañar la
información.

5
4- Página de libro
¿Cuándo la usamos?
Para agrupar información sobre un mismo tema en subtemas. Los índices y las
subpáginas deben tener como mínimo 2 párrafos de 5 líneas de información y una
imágen en la galería.

Componentes:

Índice de libro:
es la página principal de la
plantilla, debe incluir una
introducción al contenido
de las subpáginas.
Subpáginas del libro:
mencionalas en la página
índice y enlazalas.

6
Reportes de Google Analytics
Los reportes son la pieza clave para entender cómo funciona el contenido y qué es lo que
más le interesa al usuario.

Pedinos el reporte mensual de tu página por nuesto sistema de tickets Redmine, y lo

configuramos para que te llegue automáticamente.

Revisá una vez al mes tu reporte y evaluá si tu página necesita mejorar.

¿Qué podemos medir?

El tráfico de tus páginas: cantidad de vistas, usuarios, sesiones, tiempo promedio en

la página.

Adquisición del tráfico: de dónde vienen los usuarios (Google, redes sociales,
referidos de nuestro sitio u otras páginas).

Clics en tu página de área: cuántos clics tuvieron tus atajos, menú y grilla de noticias.

Desde qué dispositivos acceden los usuarios a tu contenido.

7
Usos y convenciones
Uso de la negrita
La negrita es un recurso para destacar ideas principales de una oración.
No las uses para frases largas enteras o para palabras sueltas.
No uses negrita en las bajadas de las páginas o dentro de una cita; tampoco en
combinación con hipervínculos.

El móvil cuenta con personal

técnico capacitado que
El móvil cuenta con personal informará y asesorará.
técnico capacitado que informará
y asesorará.
El móvil cuenta con personal
técnico capacitado que
informará y asesorará.

Uso de mayúsculas

Al principio de una oración y para nombres propios únicamente (entes, organismos,

programas, secretarías, subsecretarías y direcciones generales).
Nunca usar TODO MAYÚSCULAS; dificulta la lectura.
Los días, meses y estaciones van siempre en minúscula, excepto las efemérides.
Después de dos puntos usá minúscula, a menos que armes una lista de elementos.
“Ciudad” va con mayúscula cuando se refiere a Buenos Aires.
“Gobierno” va con mayúscula cuando se refiere al de Buenos Aires.
Al referirnos a las Comunas usamos mayúscula. Ejemplo: “visitamos la Comuna 11”.

Ejemplos que no van con mayúsculas: “centro de reciclado”, “audiencias públicas”,

”trámites”, “turnos”.

Horarios
Al referirnos a horarios usamos una h. Ej: “La feria será de 14:30 a 19 h.”
El símbolo puede incluirse en el último número; no es necesario duplicarlo en ambos
números.

8
Usá símbolos numerales para números, no texto:

Excepto para casos en que se habla de "uno/una"o “unos/unas”.

Ejemplo: "Un funcionario se acercó al edificio."

Ciento cincuenta mil

150.000 beneficiados
beneficiados

3 de cada 10 personas usan Tres de cada diez personas

nuestro sistema usan nuestro sistema

15 de marzo 15/3

15 de marzo de 2016 Hoy - Ayer

Atajos y botones

Sólo la primera letra de atajos y botones va en mayúscula; además de los nombres

propios.

Atajos

Pensá en el header y en los atajos como partes de un mismo bloque que se leen
en conjunto. Los textos de los atajos siempre deben remitir a lo que introduce el
header.
El título y la bajada del atajo son 2 componentes distintos: la bajada no continúa la
misma oración del título.
Las bajadas de los atajos deben indicarle al usuario con qué se va a encontrar dentro
del atajo.
Para ver los íconos: ash.buenosaires.gob.ar/lista-de-iconos

Ejemplos:

9
Botones

Comunicá de forma clara y concisa qué ocurrirá cuando el usuario los accione.

Botón gris para descargas

Ocultá siempre las descargas desde el editable (no mostrar).

Descargá el artículo

Código para crearlo:

<a class="btn btn-small btn-default" href="url con http y sin ash" target="_blank">
Nombre del botón»</a>

Botón amarillo para llamado a la acción

Por ejemplo, en las páginas que presenten programas, es ideal incluirlo al principio y
al final.

Inscribite

Código para crearlo:

<a class="btn btn-small btn-primary" href="url con http y sin ash" target="_blank">-
Nombre del botón</a>

Menú institucional
En el menú de las páginas de área, incluí un enlace sobre la información institucional
y otro del organigrama. Además, todas las áreas con noticias deben tener agrupador
que desprenda del menú institucional.

Redes sociales
Deben ser oficiales de Gobierno, aprobadas por la Dirección General de
Comunicación Digital. Tenés que enviar un pedido formal a
luciana.egido@gmail.com, indicando para qué evento o Ministerio es, en qué red
social saldrían, con qué objetivo, con qué frecuencia la usarían, hasta cuándo, etc.
No usamos redes de figuras políticas.

10
Twitter
Los tweets van sin emoticones para poder embeberlos.
Deben ir sólo en las noticias (máximo 2 tweets).

Enlaces
Los enlaces deben dirigir siempre a una página existente.
Los enlaces indexan en el buscador de Google, por eso es bueno incluirlos.
Es preferible que sean largos a muy cortos.
No uses negrita en los hipervínculos.
No uses “clic aquí” o “más información”; el texto debe tener sentido
y clarificar el enlace:

Mirá toda la información Para más información sobre el

sobre el Plan Sarmiento Plan Sarmiento, haga clic aquí

Viñetas
Usá viñetas para hacer listas que muestren pasos o grupos de información.

Incluí una introducción para dar contexto a ese grupo de información.

Usá siempre punto final en las listas.
Empezá con mayúscula cada elemento de la lista.
Enumerá cada paso si el orden de la lista es importante.

Procesos
Para explicar procesos, tené esto en cuenta:

Si el proceso es un trámite, mirá la página 21.

Si el contenido es un proceso informativo, éste debe ser dividido en pasos sencillos
de entender.
Hacé uso de las listas numeradas cuando los pasos a seguir necesitan tener un orden.

Uso de PDF
Se usan en caso de tener información complementaria, anexos o instructivos.
Evitan que la lectura sea tediosa.
Usá un botón de descarga para los PDF.

11
Imágenes, videos y banners
Fotos e ilustraciones

Toda imagen es contenido, debe relacionarse con la información y reforzar

el mensaje principal.

No pueden ser de bancos de imágenes, deben ser fotografías de producción

propia.

Es importante usar imágenes de alta calidad:

- Fotografías: mínimo 72 dpi y 960x640 píxeles.

Ilustraciones: no usamos ilustraciones ni flyers, sino fotografías reales que

identifiquen al vecino con la Ciudad. Si son realmente necesarias, deben respetar el
BAstrap (paleta de colores, tipografía y estilo, ver página 25) y ser aprobadas por el
Equipo de Contenidos.

Tips
- Incluí fotos en todos los contenidos que subas a la web.
- Usá fotos claras.
- Evitá fondos recargados de elementos o detalles.
- No insertes imágenes de cuadros o tablas, se pueden hacer desde la plataforma.
- Presentá una idea completa antes o después de la foto, no la coloques dentro de
una oración.
- La foto va siempre después de un texto.
- No usamos collages de imágenes, logos, filtros o ilustraciones.

Videos
Para validar el video que querés publicar en buenosaires.gob.ar, comunicate con el
área de prensa correspondiente a tu Ministerio.

Asegurate de que realmente necesites un video antes de pensar en producirlo.

Muchas veces con algunas imágenes o un texto bien redactado se puede explicar
mejor. Para explicar procesos muy complejos, es una buena práctica dividirlos en
varios videos cortos.

12
Estilo banners
Podés diseñar tu banner con la plantilla de Illustrator que figura en la carpeta para las
áreas, donde también podés descargar las tipografías.
- Elegí una foto atractiva y de buena calidad.
- Menos es más: poca información, concisa y al punto.
- Generá una invitación a la acción como “Inscribite”, “Sumá tus ideas”, “Conocé más”.
- Ahorrá explicaciones innecesarias. Ampliá la información en el enlace del banner.

Tipografías:
Chalet New York Nineteen-Eighty
Open Sans y sus variables

Ejemplos banners:

Tamaño chico:
300x100px

Tamaño mediano:
300x300px

13
Tamaño grande:
300x600px

14
No apliques estos elementos en los banners ni en las fotos del sitio:

15
External links

Son elementos complementarios de la página de área que agrupan listados de

“Destacados”, “Enlaces relacionados”, “Información útil”, etc.

Se pueden presentar en dos formatos:

Formato tarjeta Formato lista

Título: corto. Título: corto.
Bajada: obligatoria (15 palabras aprox.). Se puden incluir hasta 10 ítems.
Foto: obligatoria (relación 4:3, jpeg o png).
Se pueden incluir hasta 5 ítems.

16
En los external links, no uses los siguientes:

17
Formularios
El objetivo de la web de la Ciudad es brindarle al usuario la información de la manera
más simple posible. Por esto, nuestro estilo se alinea a inscripciones ágiles, con
hasta 15 campos por formulario, como máximo.

Para pedir un formulario, comunicate con el Equipo de Contenidos por Redmine.

18
Mapas
Usá mapas de Buenos Aires, no uses mapas de Google ni de otros sitios.
El equipo de USIG desarrolla y administra el sistema único de información geográfica
para el Gobierno de la Ciudad de Buenos Aires y cuenta con la información oficial de
la Ciudad que se actualiza permanentemente.

Funcionalidades de mapas BA:

Georeferenciación de datos de interés como actividades, servicios o espacios
dentro de la Ciudad.
Digitalización de zonas o limitación de áreas de influencia.
Mapa interactivo: al hacer clic sobre un ícono se despliega toda la información
asociada al elemento y el usuario puede acceder a Cómo Llego para conocer la ruta.
Además, ofrece la posibilidad de clasificar la información con diferentes colores y
buscar direcciones.

Para pedir un mapa contactate con:

Analía Mirada amirada@buenosaires.gob.ar
Mariana Casabella mcasabella@buenosaires.gob.ar

19
Chat 147
Los vecinos hacen alrededor de 150.000 consultas mensuales por el chat de
buenosaires.gob.ar. Por eso, es importante mantener su contenido actualizado.

Si publicás información muy relevante y de impacto para el público general de la

página, comunicate con el equipo de Demanda Ciudadana (responsable del chat) y
enviale el nuevo contenido: Facundo Desimone fdesimone@buenosaires.gob.ar

20
 Trámites
¿Qué es un trámite?
Todo proceso que debe hacer el vecino para gestionar un servicio de la Ciudad.

Si necesitás subir un trámite a buenosaires.gob.ar, comunicate con el equipo de

Demanda Ciudadana que se ocupa de este contenido:
Facundo Desimone fdesimone@buenosaires.gob.ar

Componentes
Enviale a Demanda Ciudadana la siguiente información sobre tu trámite:

Título: nombre cercano al usuario.

Área: a la que pertenece.

Resumen: breve descripción del trámite.

Requisitos: enlistá de manera precisa los requerimientos para realizar el trámite.

Ejemplo: - Fotocopia de DNI.
- Licencia de conducir.

Más información: información complementaria al trámite.

Organismo responsable: incluí la dirección, teléfono, correo y página web.

Modalidad del trámite: online o presencial.

Información sobre el costo del trámite: puede tener varias categorías de costos.

Formas de pago: pagos con tarjeta de crédito, efectivo, etc.

Enlaces: URL del área que pide el trámite.

Descargas: podés incluir archivos para descargar.

Direcciones: si se trata de un trámite presencial, incluí la dirección del lugar que se

obtiene del mapa de la Ciudad. De lo contrario no completes el campo ya que
confunde al usuario.

Pasos para realizar el trámite: dividí el trámite en pasos sencillos y específicos,

que sean acciones. Si un paso es muy largo o complejo, se puede dividir en pasos.

21
Errores frecuentes
No se admiten en la web

Comunicación

Contenido que no responde a ¿qué?, ¿quién?, ¿cómo?, ¿cuándo?, ¿dónde?.

Información desactualizada.
Páginas sin bajadas y sin contenido.
Bajadas complejas, que repiten títulos de manera exacta, o usan slogans que no
son informativos.
Negritas o cursivas en bajadas.
Títulos con signos de pregunta, admiración o siglas.
Faltas de ortografía y mal uso de mayúsculas.
Números de teléfono o correos electrónicos en el resumen o bajada.
Hipervínculos en resumen.
Hipervínculos de “clic aquí”, “acá”, o “más información”.

Imagen

Fotos pixeladas, con filtros, ilustraciones, textos, o de bancos de imágenes.

Banners que no están alineados a nuestro manual.
Flyers en lugar de imágenes.
Galería de imágenes con una sola foto.
Gifs.

Tipo de contenido

Usar mapas de Google u otros que no sean del mapa interactivo de la Ciudad.
Clippings de prensa: no se admiten. Las noticias deben estar desarrolladas en la
plantilla de página de noticia de Drupal.
Páginas de preguntas frecuentes: el contenido debe explicarse en cada tema
directamente.

Estilo

Contenido sin estilo o estilo mal aplicado.

Contenido muy escaso (menos de 3 párrafos), que no se desarrolla ni se ilustra con
fotos.
Cuerpo del texto sin enlaces a mails, domicilios, etc.

Técnicos

Contenido sin group audience.

22
Cómo hacer más visible tu web
Noticias en la home

Contactate con Jordi Canta (jordicanta@hotmail.com) o Facundo Quiroga

(facundoquiroga6@gmail.com) para que compartan tu noticia en la home de
buenosaires.gob.ar.

Redes sociales

Compartí la web y su contenido en tus redes sociales para llegar a más usuarios.

Títulos y bajada

Este contenido se indexa en el buscador de Google, es decir, ayuda a que tu web

aparezca cuando el usuario hace una búsqueda en Google. Por eso, es importante que
los títulos y bajadas de tus páginas contengan la información más relevante para
el usuario.

Banners en páginas de área

Publicá banners para comunicar temas destacados de una forma impactante.

Botones para las descargas

Usá botones grises para darle más visibilidad a los descargables que subas en la web.

23
Anexo
¿Cómo lee el usuario un contenido?
Lo primero que hace el usuario es un “escaneo” de la información, aterrizando el
ojo en la parte superior izquierda.

Casi el 80% de los lectores son “escaneadores”, buscan palabras clave dentro de
un texto. Sólo el 20% restante lee palabra tras palabra.
Lo primero que se lee es el texto, no las imágenes, a diferencia de lo que se cree.
Los párrafos cortos se leen con más profundidad que los largos ya que permiten
más atención visual.

Es fundamental captar la atención partiendo de un título dominante, siguiendo por el

resumen y haciendo énfasis en el primer párrafo.

Ese primer párrafo debe responder a:

¿qué?, ¿quién?, ¿cómo?, ¿cuándo?, ¿dónde? y ¿por qué?

Esta técnica se llama pirámide invertida, donde la información más relevante va al

principio y la menos relevante, al final.

Tips técnicos
¿Cuál es el tiempo de espera para ver el contenido online?

Una vez publicado un contenido en Drupal, el impacto en producción puede tardar

entre 10 y 20 minutos.

¿Por qué el contenido publicado tarda en aparecer online?

El retraso en la actualización se debe a lo que llamamos caché. Es la memoria de

acceso rápido que permite almacenar temporalmente los últimos archivos
procesados (imágenes, descargas, etc.), sin recurrir constantemente a nuestros
servidores para mostrarlos.

En buenosaries.gob.ar el caché estimula el buen funcionamiento de la página,

haciendo que la entrega del contenido sea rápida mientras es consultada por varios
usuarios a la vez.

Esperá 30 minutos antes de comunicar una URL, sino puede aparecer un aviso de
error 404.

24
Contactos
Equipo de Contenidos
Dirección General de Gestión Digital, Subsecretaría de Innovación y Ciudad Inteligente,
Ministerio de Modernización, Innovación y Tecnología: contenidosweb.gcba@gmail.com

Qué hacemos
- Somos responsables de la estrategia y administración de los contenidos de la web de
Buenos Aires.
- Diseñamos la arquitectura de la información del sitio. Pensamos y creamos las plantillas
más adecuadas para la carga de contenido, basados en Google Analytics.
- Capacitamos a las áreas en el uso de Drupal (editor web).
- Hacemos consultoría en la creación de contenido.
- Configuramos reportes de Analytics para medir la performance de cada página.

Drive de Contenidos: todo lo que necesitás para cargar contenido en la web bit.ly/2bZOyn3

Noticias en la home del sitio

- Jordi Canta: jordicanta@hotmail.com

Trámites
- Facundo Desimone: fdesimone@buenosaires.gob.ar

Canal oficial de YouTube

http://bit.ly/2cLyyEY

Lineamientos de diseño
http://gcba.github.io/BAstrap/

Mapas
- Analía Mirada: amirada@buenosaires.gob.ar
- Mariana Casabella: mcasabella@buenosaires.gob.ar

Organigrama
- María Giorgina Gorri: mgorri@buenosaires.gob.ar
- Leandro Vázquez Castro: lvazquezcastro@buenosaires.gob.ar

Usuario VPN
Los contactos para hacer la solicitud y trabajar con Drupal desde donde estés son:
- Gustavo Linares (DG de Seguridad Informática): linaresg@buenosaires.gob.ar
- Diego Ricchetti: dricchetti@buenosaires.gob.ar

25
¡Muchas gracias!
Equipo de Contenidos
Gerencia de Experiencia de Usuario
Dirección General de Gestión Digital