Ciudad Inteligente

Manual de contenidosbuenosaires.gob.ar

Índice

Plantillas - Página de área - Noticia - Página - Página de Libro

Estilo General - Cuerpo del texto - Tono y lenguaje - Títulos

Usos y convenciones - Uso de la negrita - Uso de mayúsculas - Palabras - Uso de símbolos numerales - Atajos y botones - Enlaces - Uso de PDF - Procesos

Imágenes, videos y banners - Fotos e ilustraciones - Videos - Estilo banners - Estilo external links

Anexo - ¿Cómo lee el usuario un contenido? - Tips técnicos - Contactos

CiudadInteligente

1

Plantillas1- 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 donde la creación, edición y todo su contenido está a cargo solamente del Equipo de Contenidos.

Buenos Aires > Gobierno > Justicia y seguridad

Elabora e implementa políticas que garanticen las condiciones para el ejercicio de los derechos de las personas.

Justicia y seguridad

Sistema único de denuncias

Sistema para la recepción y seguimiento de denuncias

EmergenciasSistema de Atención de riesgo al

Ciudadano

Infracciones

Información sobre el régimen de faltas en la Ciudad

Policía MetropolitanaUna policía cercana a la comunidad

Enlaces

Registro Deudores Alimentarios

Subsecretaría de Justicia

Inscripción al Registro de Cámaras de Video Mobbing

Laboral

Mediación Comunitaria

Centro de monitoreo Urbano

Boletín Oficial

Normativa

CEDOM

Tribunal Superior de Justicia

Legislatura de Ciudad de Buenos Aires

Consejo Nacional de Magistratura

Consejo de la Magistratuta de la Ciudad de Buenos Aires

DestacadosSeguridad Privada

Buscador de Comisarías y Bomberos

Diagnóstico y Diseño de Políticas de Intervención Temprana de Seguridad

Publicaciones

Justicias en las Escuelas

Elecciones

Noticias

Institucional ▼ LIcitaciones Inscripción al registro único de cámaras de seguridad a particulares – Sirecam

Áreas

Emergencias

Atención de las llamadas de urgencia realizadas por los ciudadanos de la Ciudad.

Comité de Seguimiento del Sistema de Seguridad Pública

Articula y coordina las distintas agencias de seguridad pública de la Ciudad.

Obra Social de la Policía Metropilitana

Promover y potenciar la salud y calidad de vida.

Agencia gubernamental de Control

Habilita y fiscaliza los locales comerciales de la Ciudad.

Defensa Civil

Atención integral de siniestros y desastres de la Ciudad.

Instituto Superior de Seguridad Pública

Centro académico y de investigación de la Ciudad de Buenos Aires.

zMisión y objetivos

Organigrama

Guía de funcionarios

Componentes: Header: Con foto, título y bajada que presente al área y describa lo que hace.

Menú: contiene la información institu-cional del área; misión, visión, objetivos, leyes, etc.

Grilla de noticias: Contiene las últimas 3 noticias publicadas por área.

Atajos: Pueden ser hasta 4. Enlazan a los contenidos más importantes del área.

Colección de links: agrupa los external links bajo un título introductorio.

External links: enlazan contenido que el área quiera destacar o compartir como complementario.Pueden presentarse en forma de tarjeta (foto, título y bajada), o como listado.

CiudadInteligente

2

2- Noticia

¿Cuándo la usamos?

Para comunicar avisos, novedades y eventos del área. Contenido dinámico.

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

Resúmenes: 150 caracteres. Son obligatorios y su contenido indexa en las búsquedas de Google. Son complemento del título, expli-can de manera atractiva y concisa el objetivo del contenido.No deben repetir información, conceptos o palabras ya usados en el título.

Imagen: Es obligatoria. Será la portada de la noticia. Debe tener 960 x 640 px. como mínimo

Fotogalería: Es opcional. Tienen que ser fotos que ilustran a la nota.Mejor si es un número par de imágenes.

Componentes:

3

3- Página ¿Cuándo la usamos?

Para contenido estático de poco a medio volumen de información (entre 1 y 3 páginas en word).

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

Componentes:

4- Página de Libro

¿Cuándo la usamos?

Sirven como manuales o para agrupar información sobre un mismo tema en subtemas. Navegación interna jerarquizada.

Esta plantilla difiere porque provee un índice que ordena la información contenida en las diferentes páginas.

Componentes:

Índice de libro

Subpáginas del libro

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: cada 3-5 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: incluir hipervínculos a otras páginas donde sea posible.

Glosario: explicá términos técnicos.

Tips: mostrá resultados, estadísticas, historias personales y ejemplos que se reflejen en la población objetivo, a la que querés llegar.

Revisá errores gramaticales y ortográficos.

Estilo GeneralTodo el contenido debe estar pensado para el vecino. Adelantate a sus preguntas.

Tono y lenguaje

Tono: cercano y directo; usar “vos”, sin abusar, excepto en noticias. Sin jerarquías, ni imperativo. Tono informativo y formal exclusivo para comunicaciones de temas muy preci-sos, como noticias, que requieren extrema claridad. Ej: dengue, inundaciones, licitaciones.

Mensaje: positivo y humano, objetivo claro.

Comunicación: inclusiva, dar 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 usamos palabras en inglés.

Títulos

Los títulos de las páginas internas deben coincidir con los componentes que los enlazan (atajo, external link, banner, destacado, tarjetas, etc.) Sólo la primera letra del título va en mayúscula, excepto nombres propios.

Logos y marcas

No se permiten logos y marcas de ningún tipo. 4

CiudadInteligente

Usos y convencionesUso de la negrita

La negrita es un recurso para destacar palabras o frases dentro de un texto, así como palabras relevantes en una enumeración.

Uso de mayúsculas

Al principio de una oración y para nombres propios únicamente. Nunca usar TODO MAYÚSCULAS. Dificulta la lectura.

Palabras

Es preferible usar: Preferentemente no usar:

Clic Click

Dirección de correo electrónico E-mail

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

Excepto para casos en que se habla de "uno/unos" (hasta nueve). Ejemplo: "Un funcionario se acercó al edificio."

No comenzar oraciones con símbolos numéricos.

Twitter

Los tweets van sin emoticones para poder embeberlos.

150.000 beneficiados Ciento cincuenta mil beneficiados

3 de cada 10 personas usan nuestro sistema

Hoy - Ayer

15 de marzo 15/3

Tres de cada diez personas usan nuestro sistema

15 de marzo de 2016

5

CiudadInteligente

Atajos y botones

Sólo la primera letra de atajos y botones va en mayúscula, excepto nombres propios.

Atajos:

Las bajadas de los atajos no llevan punto final. Para ver los íconos: ash.buenosaires.gob.ar/lista-de-iconos

Botones:

Usamos los botones para destacar hipervínculos.

Enlaces

Los enlaces deberán dirigir siempre a una página existente. Los enlaces indexan en el buscador de Google. Deben tener el mismo nombre que la página a la que dirigen. Es preferible que sean largos a muy cortos. No uses “clic aquí” o “más información”, el texto debe tener sentido y clarificar el enlace:

Mirá toda la información sobre el Plan Sarmiento

Para más información sobre el Plan Sarmiento, haga clic aquí

6

Uso de PDF

Se usan en caso de tener información complementaria, anexos o instructivos. Evitan que la lectura sea tediosa. Si tenés que usar un PDF anuncialo dentro del contenido.

Procesos

Si tu área tiene contenido en donde se explican procesos hay que tener en cuenta lo siguiente:

Si el proceso es un trámite debe de ser cargado directamente en la guía de trámites. 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.

7

Imágenes, videos y bannersFotos e ilustraciones

Fotos, ilustraciones y símbolos deben relacionarse con la información y reforzar el mensaje principal. Las imágenes son contenido.

Es importante usar imágenes de alta calidad: - Fotografías: mínimo 72 dpi y 960x640 píxeles (sino se pixela).

Ilustraciones: preferentemente no utilizar. En caso que sean necesarias, deben respetar el BAstrap de buenosaires.gob.ar (paleta de colores, tipografía y estilo) y ser aprobadas por el equipo de Contenidos.

Tips- Usá imágenes claras y consistentes. - 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 imagen, no la coloques dentro de una oración.

Banco de imágenes: Flickr Oficial de Gobierno.

Videos

Asegurate de que realmente necesitás un video antes de pensar en producirlo. Muchas veces con algunas imágenes o un texto bien redactado se puede explicar mejor un proceso.

Generalmente, los videos que se utilizan para explicar procesos complejos son divi-dos en segmentos más cortos. Si el proceso no es muy largo conviene hacer un video corto y conciso.

Para validar el video que querés publicar en buenosaires.gob.ar, comunicate con el contacto correspondiente (ver contactos al final de este manual).

8

CiudadInteligente

Ejemplos banners

Banners 300x300px

300x600px 300x300px

300x100px

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

Estilo banners

Cada área diseña su banner y el equipo de contenidos lo aprueba y publica. - Elegí una fotografía atractiva y de buena calidad. - Menos es más: poca información, concisa y al punto. - Generá una invitación a la acción. - Ahorrá explicaciones innecesarias. Ampliá la información en el enlace del banner.

9

Banners 300x600px

10

No se permite en los banners:

11

External links

Esta herramienta se utiliza en la página de área para enlazar contenido relacionado que al usuario puede servirle o interesarle.

Colección de links: agrupa los external links bajo un título, generalmen-te usamos “Destacados”, “Enlaces relacionados”, “Información útil”, etc.

Título de 2 o 3 palabras.

Bajada obligatoria de 15 palabras aproximadamen-te.

Medidas: Las imágenes tienen una relación 4:3 (400x300px), formato JPEG o PNG.

Pueden ser tarjetas con imagen, título y bajada (hasta 5)

Pueden ser en forma de listado (hasta 10).

Componentes:

12

No se permiten sellos, logos y marcas en external links

13

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 claves dentro de un texto. Sólo el 20% restante lee palabra tras palabra. Lo primero que se lee es el texto, a diferencia de lo que se cree, que primero se presta atención a las imágenes, gráficos o videos. Los párrafos cortos se leen con mayor 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 por último haciendo énfasis en el primer párrafo.

Ése primer párrafo debe responder a las seis W: ¿qué?, ¿quién?, ¿cómo?, ¿cuándo?, ¿dónde? y ¿por qué?

Esta técnica se llama pirámide invertida; la información más relevante se coloca al principio y la de menos relevancia, al final.

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

Una vez que seleccionamos el checkbox "Publicado" en nuestro administrador de contenidos Drupal (en ash), el tiempo de publicación es bastante rápido. Sin embargo, el impacto en producción (publicación final tanto de los cambios como del conteni-do nuevo) puede tardar entre 10 a 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 procesa-dos (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 y navegadores a la vez.

Antes de comunicar una URL recordá esperar unos 30 minutos. No comuniques URLs que fueron publicadas recientemente porque puede que los usuarios se encuentren con un aviso de 404 error.

14

CiudadInteligente

Contactos: Equipo de Contenidos: contenidosweb.gcba@gmail.com

Somos responsables de la carga, administración y edición de los contenidos de bue-nosaires.gob.ar y demás áreas de Gobierno.

Contactanos cuando necesites una capacitación en el uso de Drupal; re/diseñar la arquitectura de la información de tu sitio; consultar las métricas de tu web y/o modifi-car cualquiera de los elementos que constituyen la home de tu área (atajos, banners, formularios de contacto, etc).

Por contenidos sobre la home del sitio: Jordi Canta: jordicanta@hotmail.com

Para subir un trámite a buenosaires.gob.ar/tramites Facundo Desimone (fdesimone@buenosaires.gob.ar)

Videos y canal oficial de Youtube: http://bit.ly/2cLyyEY

Lineamientos de Diseño: Ingresá a http://gcba.github.io/BAstrap/

15

CiudadInteligente