22
RED DIGITAL DE BANCOS DE PROYECTOS

Manual de estilo

Embed Size (px)

DESCRIPTION

Manual de estilo: Red Digital de Bancos Proyectos.

Citation preview

Page 1: Manual de estilo

RED DIGITAL DE BANCOSDE PROYECTOS

Page 2: Manual de estilo

RED DIGITAL DE BANCOS DE PROYECTOS

Page 3: Manual de estilo

IntroducciónColorFotosEstructura webEstructura indexEstructura Interior

pag. 4pag. 6pag. 7pag. 8pag. 9pag. 10

MenúTitularesTextosListadosTablas

pag. 12pag. 13pag. 14pag. 15pag. 16

Índice

Listados de usos

Normas del estilo de redacción

Estilo de redacciónRecometaciones Finales

pag. 17pag. 20

Page 4: Manual de estilo

Uso del manual El objetivo del manual de estilo, es normalizar la estructura de contenidos y el diseño del portal de la Red Digital de Bancos de Proyectos, homogenizar estilo y estructuras para facilitar el desarrollo de nuevos contenidos y actualizaciones posteriores de la misma.Hay que tener en cuenta que no solo este manual sirve de referencia, también se tiene quehacer uso del Manual de Estilo Gráfico de la Gobernación de Antioquia.

La coherencia resulta imprescindible en la web de la Red, cargada de información de fuentesdistintas. Esta manual suministra estándares para facilitar la labor de la persona encargada de la misma a la hora de generar nuevos contenidos o modificar los existentes.

Alcance del manualEl manual está pensado para solucionar eficientemente los problemas de diseño y estilo ofreciendo criterios lógicos y ayudando a tomar conciencia de la línea de estilo que utiliza laweb, a la vez que aclara dudas de aspecto gráfico para la interfaz. Estructura del manualCada una de estas propuestas que contempla el manual se divide en zonas características: - Presentación. Titular y subtitular que dan nombre y descripción al tipo de información que va a tratar. - Uso: plantea la metodología de cada uno de los módulos que contempla el manual. Especifica los usos correctos y los menos recomendados. - Atributos: Los atributos aclaran las propiedades que casa estilo puede plantear y define una línea grafica adecuada, así como una correcta estructura para la maquetación. - Recomendaciones de diseño. Son puntualizaciones de estilo que ayudan a formar una línea grafica adecuada, así como una correcta estructura para maquetación. - Ejemplo visual. Todos los estilo descritos en el manual van acompañados de su correspondiente imagen, que ayuda a conformar un contenido ampliamente aclaratorio en cada uno de los casos. - Y finalmente una guía de estilo de redacción y reglas de ortografía. UsabilidadLa usabilidad de un sitio web puede definirse como la capacidad del sitio para ser usado porun público objetivo con la finalidad de cumplir sus objetivos con el mayor grado de efectividad,eficiencia satisfacción posible en un contexto de uso especificado.

Uso del manual en el portal web Red Digital de Bancos de Proyectos

Page 5: Manual de estilo

Parte de dos principios - La interfaz debe acomodarse al usuario, y no la inversa. - El diseño del sistema debe estar enfocado: en primer lugar al público objetivo y en segundo lugar, a los contenidos que posee.

Debemos hacer hincapié en el diseño y desarrollo de la navegabilidad. Esta debe ser: - Lo más intuitiva posible - Coherente y homogénea a lo largo del todo sitio.

Accesibilidad

¿Qué es la accesibilidad?La accesibilidad indica la facilidad con la que algo puede ser usada, visitado o conocido en general por todas las persona.

El portal de Red Digital de Bancos de Proyectos está preparado para ofrecer todo su contenido de manera accesible cumpliendo en todo momento los criterios de accesibilidadweb.

Estos criterios indican la capacidad de accesos a la web y a sus contenidos por todas laspersonas, independientemente de la discapacidad que presenten o de las que deriven delcontexto de uso (tecnologías o ambientales). Esta cualidad está íntimamente relacionada con la usabilidad.

Page 6: Manual de estilo

Color y uso tipográfico del color

Gris#636363R: 99G: 99B: 99

Los colores principales de la Web

Azul#3366CCR: 51G: 102B: 104

Amarillo#FFCC33R: 265G: 204B: 51

Verde#669933R: 102G: 153B: 51

Estos son los principales colores del portal, están descritos con su color hexagesimal y susvalores en RGB. Todos los textos de la web serán de color gris, exceptuando los títulos y los casos excepcionales. Como por ejemplo, determinados tipos de enlace, nota el pie, etc. En la elección del color no debemos olvidar que su fin primero es la legibilidad tipográfica. Los textos de la web de la red digital de proyectos utilizan siempre tipos oscuros sobre fondosy nunca a la inversa. En el momento que el fondo está de un determinado color distinto alblanco la legibilidad del texto varia, dificultando la visualización de los estilo.

Para obtener la mayor legibilidad de los tipos se han se sopesar tres propiedades de los estilos. - Color del texto que se mide en la web con valores hexagesimales - Tamaño del texto que se mide con unidades porcentuales de escala (valores relativos preferible en accesibilidad) o puntos (Valores absolutos).

Otros colores de la Web

Estos otros colores que aparecen en la web no se emplearan en ninguno de los textos, exceptuando titulares de cabecera, dependiendo siempre de la sección en la que estamos.Esta restricción de gama de color corresponde a necesidades de normalización de estilosy de uso de estructurado de los colores tipográficos.

Café#999966R: 153G: 153B: 102

Morado#666699R: 102G: 102B: 153

Rojo#660033R: 102G: 0B: 51

Azul#006666R: 0G: 102B: 102

Page 7: Manual de estilo

Uso y proporción de imagen

Uso y proporción de imagenEn la elección de las imágenes del carácter de sitio han sido optimizadas en formato de.jpg, .png o .giff.Encontramos 4 tipos de imágenes - Perfil: 150 x 150 px - Imágenes slider: 670 x 193 px - Imagen leer más o imagen de lectura interna: 340 x 260 px - Imágenes convocatorias, también se puede usar como imagen de lectura interna: 670 x 300 px

340px

260px

Imagen leer más y noticia lectura interna

150px

150px

Imagen Perfil

670px

193px

Imagen Slider

Page 8: Manual de estilo

Descripción de la estructura

VerticalidadLa web tiene una estructura de disposición vertical, mostrando por estrados ordenadossegún su relevancia informativa y estructurando la disposición de sus elementos parafacilitar la navegación entre las distintas secciones de la web.

La disposición vertical de los contenidos genera una estructura entendible tanto para el usuario normal como para un usuario disminuido que visualice la web con contenidosaccesibles. Esta disposición esta especialmente diseñada para facilitar a todos los usuarios de la web una navegación y el uso de todos los recursos de la web on-line.

Jerarquización de la informaciónLa jerarquía visual pone de manifiesto la lógica visual y otros aspectos que aplican frecuentemente al diseño. Estas jerarquías pueden ser de muchas variantes, pero todas multiplican la eficacia de la comunicación sin restar creatividad formar ni conceptual.

La lógica visual se basa en la sencillez y el pragmatismo: elementos que aun separados norivalizan entre si y que con una mínima energía grafica nos indican las opciones más apropiadas que tenemos.

Espacio de trabajoLa zona más relevante de la página es su zona de trabajo central en al que figura el contenidode la página donde el usuario va a encontrar toda la información.

Page 9: Manual de estilo

Descripción de la estructura de la pagina index

La estructura básica de las web está dividida en tres secciones. Superior, centro e inferior. La sección superior sirve de localización dentro de la web. En este espacio aparece el logotipo de la red.

La sección central es la que sirvecomo contenedor de un espaciopara video y un espacio paranoticias y una botonera vertical.

En el índex el contenido se centraen noticias de actualidad y enlacesrelacionados, la parte superior de se aloja la noticia principal destacada las noticias de segundonivel y así sucesivamentehacia abajo.

Sección inferior, contiene un muroen el que los usuarios puede dejarcomentarios, se puede hacer debatas publicar fotos, tiene unafunción similar al muro deFacebook.

En estas dos imagenes podemosver la foto real de una página y unesquema donde vemos claramente las secciones de la web.

Noticia 1 er nivel

Cabecera

Slider

Video Noticias

Menú

Pie

Galería

GaleríaMuro

Page 10: Manual de estilo

Páginas interiores de texto y texto con imagen

La estructura básica es similar a pagina de inicio, aunque en esta ocasión la sección central alberga el contenido, que posee una disposición vertical.

Cabecera

Contenido

MenúVertical

Pie

Titular 1

Titular 2

Texto

Además del texto se puede acompañar la información con una imagen. Su distribución varía cuanto a que el texto rodea la imagen que hemos insertado, aunque sigue respetando la verticalidad general de la estructura.

Cabecera

Contenido

MenúVertical

Pie

Titular 1

Titular 2

TextoImagen

Page 11: Manual de estilo

Otra posiblidad para ampliar las información es incluyendo una imagen de cabecera que puedeser simple o compuestas pero siempre abarcando la mayor parte posible de la anchura de la zona de contenido.

Páginas interiores de encabezado con imagen

Cabecera

Contenido

MenúVertical

Pie

Titular 1

Texto

Imagen

Page 12: Manual de estilo

ContenidoContenido

Menú derecho

Toda la página utilizará un menú de forma vertical en la parte derecha de la página.

Page 13: Manual de estilo

Usualmente un documento tiene, además de texto llano, una serie de ancabezados o titulares.

Encabezados de sección

Titular 1Este será usado en el nombre del artículo, siempre será en Arial 14 color negro, esta disposición ya está programada en el motor de administración del portal.

Asi vamos en regalías Arial 14px normalcolor #330000

Titular 2Con este se harán los lead de los artículos, siempre será en Arial 10 en negrilla y color gris #636363.

Se han invertido 330 mil millones Arial 10px negrillacolor #636363

Titular 1

Titular 2

Page 14: Manual de estilo

Contenidos con texto

Ejemplo texto

La tipografía dominante en todo el sitio es la Arial. Una fuente muy extendida que asegura unaperfecta legibilidad a todos los tamaños y en todas las plataformas y navegadores.Esta tipografía pertenece a la familia de las fuentes preinstaladas de la plataforma Windonws y Mac. Por lo que se verá correctamente en ambos sistemas.

Para el texto estándar se utilizara Arial 10, los destacados en negrita y los enlaces subrayados. Los titulares también son en Arial pero de mayor tamaño dependiendo de su importancia.

Texto normal

Texto negrita

Texto negrita

Texto normal

Texto negrita

Texto destacado

Arial 10px color #636363

Arial 10px bold color #636363

Arial 10px bold italic color #636363

Page 15: Manual de estilo

Listados múltiples de elemento

Los listados de elementos son herramientas muy útiles para la navegación web.Estos listados puede servir para enumerar elementos es una relación ordenada además de servir como hipervínculo con otras páginas web.

Los listados destacan por su ordenación vertical, su separación interlineal entre elementospuede resultar útil para páginas con contenidos de necesitan ampliar información.

Lista 1 con elemento

- Elemento 1 sin enlace- Elemento 2 con enlace

Arial 10 normacolor #636363

Page 16: Manual de estilo

Listado simple

Tabla simpleLa tabla simple con encabezado resaltado, se utiliza para aquellas tablas de datos que se empleen en la web. Se compone de 2 partes, el encabezado y el cuerpo de la tabla.

Disposición verticalSu ordenación de elementos se dispondrá generalmente vertical. Este tipo se empleara para numerar y organizar los datos de arriba abajo. Todos sus valores disfrutaran de las misma importancia y su lectura se efectuara de arriba abajo teniendo siempre en la primera fila textosdescriptivos de tipo de información que contiene cada uno de las columnas.

Elemento de cabeceraArial 10 boldColor #636363

DatosArial 10 normaColor #636363

Celda de cabeceraColor #EBEBEB

Celda blancaColor #FFFFFFF

Celda grisColor #FFFFFFF

Linea gris de contornoColor #C1C1C1

Page 17: Manual de estilo

Normas del estilo de redacción

A la hora de redactar notas periodísticas debe tenerse en cuenta algunos consejos básicos que facilitaran la maquetación de la página web y por ende la lectura de cada uno de los artículos. 1. Deben respetarse las normas básicas del idioma español y de ortografía contenidas en las obras académicas de la Real Academia Española (RAE). - En el plano semántico se revisará con atención lo escrito, especialmente aquello que tienda a malinterpretarse. - Se recomienda el uso adecuado de la síntesis gramatical del idioma español. - Se exigiráel perfecto uso de los signos de puntuación.

2. Se mantendrá un estilo único para la elaboración de los contenidos independiente del tema que éstas traten. - Debe utilizarse la estructura básica según el modelo: titular, lead, desarrollo del contenido y conclusión. - Desarrollar una idea en cada párrafo. - Siempre que sea posible y para más facilidad, escribir oraciones cortas separadas por puntos. - Redactar oraciones siguiendo su orden: sujeto, verbo y complementos. - Evitar los circunloquios, rodeos de palabras para dar a entender algo que hubiera podido expresarse más brevemente. La oración «el rey llamó a su hermano, que acudió a la cita, y le propuso un trato» puede expresarse más concisamente como «el rey propuso un trato a su hermano» «Estos animales suelen encontrarse la mayoría de las veces en lugares aislados de la luz donde el grado de humedad es más alto de lo normal» es un circunloquio que expresa lo mismo que «estos animales se encuentran casi siempre en lugares oscuros y húmedos».

3. Incisos, comentarios y aclaraciones - Los paréntesis (-) son usados principalmente en matemáticas y en algunas ocasiones en la redacción de textos, pero hay que evitar su uso ya que existen gran cantidad de incisos que al ponerlos entre paréntesis dificultan la lectura. En este caso estos incisos pueden ir entre comas si no es necesario. En caso de que sea realmente necesario puede ponerse un enlace que lleve al usuario a encontrar más información.

Page 18: Manual de estilo

4. Títulos de los artículos - Los títulos de los artículos deben ser por regla general en minúsculas, salvo la primera letra de la frase o aquellas palabras que por su significado lo ameriten o las reglas ortográficas así lo estimen. Ejemplos de usos incorrectos.

Incorrecto - ASÍ VAMOS EN REGALÍAS - Así Vamos En Regalías Correcto - Así vamos en regalías

5. El uso adecuado de la mayúsculas - En español los títulos, cargos y nombres de dignidad como: rey, papa, duque, presidente, ministro etc., se escriben con minúscula debido a su condición de nombres comunes. - No se deben usar en los tratamientos deferenciales (don, doña, señor, señora, su majestad, su excelencia, excelentísimo, su ilustrísima, su eminencia, su santidad) si preceden al nombre propio de las personas a las que se aplica el tratamiento. - Solo se mantiene la mayúscula inicial obligatoria en las abreviaturas de estos tratamientos cuando hayan quedado fijadas en esta forma, como en D.ª, Dra., Fr., Lic., Ilmo., Sr., Sto., Ud. - En español, se escribe con mayúscula inicial la primera palabra del título de cualquier obra de creación: libros, películas, cuadros, esculturas, piezas musicales, programas de radio o televisión, etc. Independientemente de la longitud del título, el resto de las palabras que lo componen y que no sean nombres propios, deben escribirse con minúscula. Ejemplos: El rayo que no cesa, Últimas tardes con Teresa, El año de la muerte de Ricardo Reis, Luces de bohemia. - Se usa cursiva para los títulos de las obras literarias y artísticas, como libros, pinturas, películas, series de televisión y álbumes musicales.

6. Las comillas son un signo ortográfico del cual se usan diferentes tipos en el español. - Las comillas angulares, también llamadas latinas o españolas (« »), - las inglesas (“ ”) - las simples („ ‟). Ejemplos: En los textos impresos e informáticos se recomienda utilizar en primera instancia las comillas angulares, reservando los otros tipos para cuando deban añadirse comillas a partes de un texto ya previamente entrecomillado. En este caso, las simples se emplean en último lugar: «Antonio me dijo: “Vaya „cacharro‟ que se ha comprado Julián”». Además, en obras de carácter lingüístico, las comillas simples se utilizan para enmarcar los significados: La voz apicultura está formada a partir de los términos latinos apis ‘abeja’ y cultura ‘cultivo, crianza’.

Page 19: Manual de estilo

7. Cuándo escribir los números en palabras y cuándo mediante signos.

Se escribirán preferentemente con letras: - Los números que pueden expresarse en una sola palabra, esto es, del cero al veintinueve, las decenas (treinta, cuarenta, etc.) y las centenas (cien, doscientos, etc.): Me he comprado cinco libros: tres ensayos y dos novelas; Este año tengo cincuenta alumnos en clase; A la boda acudieron trescientos invitados. - Los números redondos que pueden expresarse en dos palabras (trescientos mil, dos millones, etc.): Acudieron cien mil personas a la manifestación; Ganó tres millones en un concurso. - Los números que se expresan en dos palabras unidas por la conjunción y (hasta noventa y nueve): Mi padre cumplió ochenta y siete años la semana pasada; En la Biblioteca de Palacio hay treinta y cinco manuscritos. - No es recomendable mezclar en un mismo enunciado números escritos con cifras y números escritos con letra; así pues, si algún número perteneciente a las clases antes señaladas forma serie con otros más complejos, es mejor escribirlos todos con cifras: En la Biblioteca de Palacio hay 35 manuscritos y 135 226 volúmenes impresos, 134 de ellos incunables. - En textos no técnicos es preferible escribir con letras los números no excesivamente complejos referidos a unidades de medida. En ese caso, no debe usarse el símbolo de la unidad, sino su nombre: Recorrimos a pie los últimos veinte kilómetros (no los últimos veinte km). Cuando se utiliza el símbolo, es obligado escribir el número en cifras - Todos los números aproximados o los usados con intención expresiva: Creo que nació en mil novecientos cincuenta y tantos; Habría unas ciento cincuenta mil personas en la manifestación; ¡Te lo he repetido un millón de veces y no me haces caso! - Los números que forman parte de locuciones o frases hechas: No hay duda: es el número uno; Éramos cuatro gatos en la fiesta; Te da lo mismo ocho que ochenta; A mí me pasa tres cuartos de lo mismo.

Se escribirán con cifras: - Los números que exigirían el empleo de cuatro o más palabras en su escritura con letras: En verano la población asciende a 32 423 habitantes (más claro y de comprensión más rápida que treinta y dos mil cuatrocientos veintitrés). En algunos documentos, como cheques bancarios, contratos, letras de cambio, etc., por razones de seguridad, la expresión en cifras va acompañada normalmente de la expresión en palabras: Páguese al portador de este cheque la cantidad de veinticinco mil trescientos treinta y ocho euros. - Los números formados por una parte entera y una decimal: El índice de natalidad es de 1,5 (o 1.5, en los países que usan el punto como separador decimal) niños por mujer. También en este caso, en cheques bancarios, contratos, letras de cambio, etc., la expresión numérica suele acompañarse de la expresión lingüística: Páguese al portador de este cheque la cantidad de mil doscientos treinta y cuatro euros con veinticinco céntimos. El sustantivo cuantificado por una expresión numérica decimal, incluso si esta designa cantidad inferior a la unidad, debe ir en plural: 0,5 millones de pesos (y no 0,5 millón de pesos).

Page 20: Manual de estilo

- Los porcentajes superiores a diez: En las últimas elecciones votó el 84% de la población. No debe dejarse espacio de separación entre el número y el signo %. Hasta el diez suele alternar el empleo de cifras o palabras en la indicación de los porcentajes: El 3% (o tres por ciento) de los encuestados dijo no estar de acuerdo con la medida. El símbolo % debe leerse siempre «por ciento», no «por cien», salvo en el caso del 100%, que puede expresarse en letras de tres modos: cien por cien, cien por ciento o ciento por ciento (→ ciento, 3). No debe usarse el signo % cuando el porcentaje se expresa con palabras ( el tres %). Tanto si se escribe con cifras como con palabras, la expresión de los porcentajes debe quedar dentro de la misma línea: 3 / %, tres / por ciento, tres por / ciento. - Los números referidos a unidades de medida, cuando van seguidos del símbolo correspondiente: Madrid dista 40 km de Guadalajara; Mañana se alcanzarán los 35 ºC. No se deben escribir en líneas diferentes la cifra y el símbolo: 40 / km, 35 / ºC. - Los números seguidos de la abreviatura del concepto que cuantifican: 5 cts. („cinco céntimos‟), 45 págs. („cuarenta y cinco páginas‟), 2 vols. („dos volúmenes‟). No se deben escribir en líneas diferentes el número y la abreviatura: 5 / cts. - Los números pospuestos al sustantivo al que se refieren (expresado o no mediante abreviatura), usados para identificar un elemento concreto dentro de una serie: página 3 (o pág. 3), habitación 317 (ohab. 317), número 37 (o núm. 37), tabla 7, gráfico 15, etc.

8. Tiempos verbales y expresiones temporales - Debe evitarse el uso de expresiones relativas al momento presente («hoy»,«ahora», «actualmente»...) o que tomen al presente como referencia («en los últimos tiempos», «recientemente», «este año», «el año pasado», «hace unos meses»...), ya que cuando el lector futuro las lea e interprete en función de su propio presente, perderán su sentido. En su lugar debe indicarse una fecha concreta.

Recomendaciones finales - Cuando el artículo tenga más de cuatro o cinco párrafos largos, es recomendable que esté dividido en secciones. - Para más interactividad con el lector web, se deben usar hipervínculos que amplíen la información de la nota periodística. - Todo el texto debe ir en Arial 10. - El lead de la nota debe ir en negrita y sin centrado- Titulares máximo de 1 línea - Las fotos de la notas deben ir con su respectiva fuente al igual que las notas que lo ameriten

Page 21: Manual de estilo

Medellín 2014

Page 22: Manual de estilo