La configuración de los textos es uno de los aspectos fundamentales de la edición web. Podemos dividir los textos en tres grupos básicos: Los textos Jerarquizados (encabezados, títulos, subtítulos), el texto base (el cuerpo principal de cada artículo o publicación) y los paratextos (textos auxiliares que se colocan funcional y materialmente por debajo, subordinados al texto base).
Los atributos de los textos, se pueden dividir en dos grupos. Primero están los atributos del Párrafo, es las apariencia que controlamos mediante Estilos de Párrafo que modifican a todo el párrafo. Después tenemos los atributos del carácter (cada letra o signo que ocupa un espacio es un carácter), cuya apariencia controlamos mediante los Estilos de carácter que modifican solamente cómo deben verse los caracteres marcados (generalmente, claro, marcamos con un estilo de carácter palabras enteras, pero lo que hacemos es seleccionar cada uno de sus caracteres), esos caracteres que hayamos seleccionado para aplicar un estilo de carácter determinado como puede ser cursivas o negritas.
A través de una pauta de estilos personalizada, en la revista Árbol Invertido manejamos un uso estricto de las normas y los estándares de edición, adaptados a la lectura digital en la web, para mantener una homogeneidad y solidez a través de todos los usos de estos atributos tipográficos en los diferentes géneros periodísticos, informativos y de opinión, como también literarios.
La siguiente es nuestra Carta de Estilos personalizados.
Lista de Formatos
En la web, y en lenguaje HTML, el texto se divide en dos formas relevantes que son los Encabezados (se consiguen, en lenguaje HTML, aplicando a nivel de códigos las etiquetas "<h1>, <h2>, etc.) y los demás textos que no son encabezados, o sea todo lo que es un Párrafo "Normal" (en lenguaje HTML, marcado con la etiqueta "<p>"). Para los efectos de la edición, todos los "encabezados" entran siempre en el grupo de textos Jerarquizados, mientras el uso del "párrafo" homogeniza todo lo que entra dentro del texto normal o "por defecto" de una publicación, que no es más que el "texto base".
|
Lista de Formatos |
|
|
Estilo |
Descripción |
| Párrafo |
|
| Encabezado/3 |
|
| Encabezado/4 |
|
Lista de estilos de Párrafo
Mediante la aplicación de estilos de párrafos personalizados (que en el lenguaje HTML se transforman en etiquetas span), logramos darle configuraciones de texto enriquecido a todos los párrafos de nuestras publicaciones, controlando sus distintas apariencias según las distintas partes o funciones de los textos dentro de una publicación, y que conllevan distintas maneras de significar y de leer, como puede ocurrir con las citas, los paratextos, y también con formas como los distintos tipos de párrafos o manchas tipográficas (párrafo español, párrafo americano y párrafo francés). Estos atributos finalmente se aplican de una manera homogénea a través de nuestro sitio web gracias al uso de una Hoja de Estilos CSS.
|
Lista de estilos de Párrafo |
|
|
Estilo |
Descripción |
| capitular | • APARIENCIA: Para un párrafo que empieza con capitular. (Aunque en Word no se vea, cuando marquemos un párrafo con este estilo, sí aparecerá la capitular en la web). • CUÁNDO APLICAR: Primer párrafo de inicio de una parte o un capítulo que queremos así destacar. |
| cita | • APARIENCIA: Margen o sangría izquierda mayor en todas las líneas del párrafo, interlineado menor, justificado. Siempre el primer párrafo de cada cita aparece sin tabulación. • CUÁNDO APLICAR: Todos los párrafos de citas fuera de párrafo que sean prosas. |
| citasalto | • APARIENCIA: Igual que “cita”, pero con un salto o espacio mayor por arriba, o sea, un espacio anterior o efecto de "salto". Sin tabulación en la primera línea. • CUÁNDO APLICAR: El primer párrafo siempre de una cita fuera de párrafo que sea prosa. Cualquier párrafo de una cita, solamente cuando queremos que quede más separado del párrafo anterior (porque sean dos textos tomados de fuentes diferentes, incluyan originalmente un salto, etc.) |
| citaverso | • APARIENCIA: Igual que el estilo “cita”, pero con la diferencia de que además todo en cursivas: la poesía se cita en cursivas. Párrafo francés. • CUÁNDO APLICAR: Versos citados fuera de párrafo (solamente fuera, porque, ojo: en versos citados dentro de párrafo solo se aplica el estilo de carácter cursiva y se ponen entre comillas). Lo aplicamos a 2do y siguientes versos de cada estrofa, porque al 1er verso de cada estrofa aplicaremos el estilo "citavsalt". |
| citavsalt | •APARIENCIA: Igual que “citaverso”, pero con la única diferencia de que aparece un espacio anterior mayor antes, un efecto de salto antes (ejemplo: se aplica a un verso citado que inicia una segunda estrofa, y esta estrofa queda separada de la estrofa anterior). Párrafo francés. • CUÁNDO APLICAR: El primer verso de una cita de poesía fuera de párrafo, y el 1er verso que comienza cada nueva estrofa distinta en el bloque de una cita con varias estrofas. • OJO: Otra opción es que al conjunto de todos los párrafos de una cita de versos (cursiva), podemos aplicarle el botón de citas de la barra de herramientas (el icono es una comilla). |
| lista | • APARIENCIA: Párrafo francés, mayor margen izquierda, menor interlineado, todo lo demás es Normal. • CUÁNDO APLICAR: Párrafos donde queremos que la primera línea quede sobresaliendo hacia la izquierda (como es propio de un párrafo francés). Serie de elementos o párrafos ordenados como una lista (la lista puede ser con viñetas o con números). • OJO: Otra opción es que podemos aplicar el botón de lista de la Barra de Herramientas (a escoger entre lista con viñetas o lista con números). Lista con números: cuando hay una gradación lógica, un orden jerárquico o posiciones que van del "primero" hacia atrás, como en una lista de "los cinco ganadores", o cuando la cantidad total de elementos es un dato importante. O sea, cuando aparte de la ordenación estética con sangrado también hay una información implícita de orden consecutivo o de cantidad total. |
| listasalto | • APARIENCIA: Igual que "lista", pero además con un espacio anterior o efecto de salto antes. |
| normsalto | • APARIENCIA: Es el párrafo normal por defecto, marcado con formato "Párrafo", y cualquier párrafo que simplemente se copie o escriba aquí sin ser marcado con un estilo personalizados, en ese caso, de todos modos tendrán siempre el estilo "normal". En este caso, solamente la diferencia es que adquiere un espacio anterior o un efecto de salto antes. |
| notas | • APARIENCIA: Con menor puntaje que texto base y con menor interlineado, párrafo francés. • CUÁNDO APLICAR: Para las notas al final de un artículo. No obstante, evitaremos siempre el colocar notas al final, pues preferimos que las aclaraciones y acotaciones aparezcan inmediatamente dentro del mismo artículo, entre paréntesis. También evitaremos usar Bibliografía, pero si la hubiera, se usará este estilo "notas". |
| paratexto | • APARIENCIA: Puntaje menor que el texto base, interlineado menor, margen o sangría izquierda. Todo el texto por defecto aparece en redondas (o sea, ni negritas ni cursivas). • CUÁNDO APLICAR: Los paratextos que no son versos, que deben verse en redondas, como son: dedicatorias, fechas aparte, epígrafes en prosa, etc. • OJO: Los paratextos son un tipo de textos que se visualizan como subordinados al texto base o cuerpo principal del artículo, están por debajo del texto base, son textos auxiliares, como: dedicatorias, epígrafes, notas aclaratorias del autor o del editor, etc. Esa subordinación, se visibiliza de manera material con atributos como: puntaje e interlineado menor, sangría diferente. Tenemos un grupo de estilos que se aplican a distintos paratextos, para lograr distintos efectos relativos a algunas diferencias, como diferenciar cuando es prosa o es poesía, incluir espacio mayor antes del párrafo o no incluirlo, versalitas cuando es una firma de un autor de un epígrafe, etc. Son nuestros estilos personalizados: "paratexto", ""paratsalto", "paratverso"", "paratvsalt". |
| paratsalto | • APARIENCIA: Se ve igual que “paratexto”, pero además con un salto antes (espacio de separación mayor antes del párrafo). • CUÁNDO APLICAR: La primera línea o el primer párrafo de un bloque de paratexto. Una línea de paratexto que deba verse más separada de la línea anterior: porque es una estrofa diferente de un epígrafe, una nota diferente, etc. |
| paratverso | • APARIENCIA: Igual que “paratexto”, pero además todo en cursivas. • CUÁNDO APLICAR: Lo usamos en paratextos que además son versos,, como epígrafes que son versos. Cuidado: no confundir con citas fuera de párrafo que son versos, porque en este caso la cita sí forma parte del texto base y por eso para las citas de poemas se usan los estilos "citaverso" y "citavsalt". |
| paratvsalt | • APARIENCIA: Igual que “paratverso”, pero además con un espacio anterior mayor. • CUÁNDO APLICAR: Una línea o un párrafo de un paratexto que sea verso y que deba verse con un salto antes, como ocurre con el primer verso de un epígrafe poético o con el primer verso de cada nueva estrofa diferente. |
| pfrances | • APARIENCIA: Igual que “normal” (mismo puntaje y mismo interlineado del texto base), pero con forma de párrafo francés. El párrafo francés tiene la única diferencia de que sobresale la primera línea hacia la izquierda: o sea, la primera línea no tiene margen o sangría, y desde la 2da línea en adelante ya todo el resto del párrafo sí tiene sangrado. • CUÁNDO APLICAR: Párrafos en que queramos por algún motivo que sobresalga la primera línea para crear un efecto visual donde las entradas sean por palabras que inician cada párrafo, como ocurre con un glosario, un diccionario, etc. |
| pfrancsalt | • APARIENCIA: Igual que "pfrances", pero además con un espacio anterior mayor. |
| preguntas | • APARIENCIA: Todo en negritas, lo demás igual que el estilo normal o el texto base. Pero está programado (mediante Hoja de Estilo CSS) para que cada bloque de una nueva pregunta (aunque la pregunta se componga de dos o más párrafos) aparezca siempre con un espacio anterior mayor, introduciendo un efecto de salto antes, y por tanto conformando visualmente un único bloque todos los distintos párrafos que componen una única pregunta. • CUÁNDO APLICAR: En entrevista estructuradas en modo de preguntas y respuestas, se aplica este estilo a todos los textos que pertenecen al entrevistador, para diferenciarlos de las respuestas del entrevistado. |
| sepaster | • APARIENCIA: Los asteriscos aparecerán centrados verticalmente (mismo espacio de separación de párrafo antes y después). • CUÁNDO APLICAR: Cuando usamos asterisco (usamos exactamente tres asteriscos: ***) para separar bloques de texto, por ejemplo en poesía es un recurso que a veces se usa, como un separador. Colocaremos tres asteriscos, separados por un espacio, y les aplicaremos este estilo. |
| tabulado | • APARIENCIA: Igual que el texto base o “normal”, pero todo el párrafo tiene mayor margen izquierda, aparece metido más hacia la derecha. • CUÁNDO APLICAR: Párrafos y bloques de textos que por alguna razón queramos diferenciar del texto base: la cita extensa de un documento completo, por ejemplo. |
| tabulsalto | • APARIENCIA: Igual que "tabulado", pero con un espacio anterior o un efecto visual de salto de párrafo. |
| titulocent | •APARIENCIA: Todo en mayúsculas y negritas, con mayor puntaje que el texto base, y todo el párrafo centrado. • CUÁNDO APLICAR: Podemos usarlo para un título que queremos que se visualice de esta forma, como por ejemplo los títulos de distintos poemas en un dossier o conjunto de poemas agrupados en una sola página; en los títulos de distintas obras agrupadas, como viñetas, cuentos cortos o piezas reunidas. |
| tituloizq | • APARIENCIA: Igual que “titulocent”, pero solo cambia que el texto aparece justificado a la izquierda. |
| verso | • APARIENCIA: En redondas, con mismo puntaje que el texto base de la prosa, con forma de párrafo francés, pero con un interlineado menor que el texto base en prosa (los versos quedan un poco más pegados o unidos). • CUÁNDO APLICAR: Los versos de los poemas, publicados normalmente como poemas (por ejemplo en la sección POESÍA), así que este estilo no se usa para las citas fuera de párrafo (como cuando en un ensayo el ensayista cita unos versos o cita un poema completo: para eso están los estilos “citaverso” y “citavsalt”). |
| versosalto | • APARIENCIA: Igual que el estilo “verso”, pero con la única diferencia que se introduce un espacio anterior mayor, un efecto visual de salto de párrafo. • CUÁNDO APLICAR: El primer verso de cada poema, y también el primer verso de cada nueva estrofa o que inicia un nuevo bloque dentro de un mismo poema. |
Lista de Formas (otros estilos de párrafo)
Usando los mismos procedimientos de otorgar atributos a determinados estilos de párrafo, podemos lograr otros resultados en la programación o configuración de los textos para la web. En la revista Árbol Invertido encontramos otros usos para lograr apariencias particulares que se salen de lo usual, a través de la aplicación de estilos de párrafos personalizados que confieren otras "formas" al texto.
|
Lista de Formas (otros estilos de párrafo) |
|
|
Estilo |
Descripción |
| DixIndex | • APARIENCIA: Es un tipo de Índice especial que tenemos programado o preestablecido mediante uso de Hoja de Estilo CSS, para que se visualice de modo horizontal en una línea, separado por rayas verticales. • CUÁNDO APLICAR: Debemos crear primero el Índice en forma de una lista con viñetas, y después aplicarle a todo el conjunto este estilo, para que en la publicación adopte la apariencia deseada. Lo usamos, por ejemplo, para crear un Índice Alfabético: donde cada elemento del índice tiene un hipervínculo que lleva a una página web diferente. |
| JustifCent | • APARIENCIA: Párrafo “normal” pero justificado todo al centro. |
| JustifDer | • APARIENCIA: Párrafo “normal”, pero justificado a derecha. |
| MarcoTex | • APARIENCIA: Se crea un bloque o recuadro gris en la parte derecha, dentro del artículo en el mismo lugar donde se encuentre el párrafo marcado (puede estar en cualquier lugar del artículo, pero preferimos nunca usarlo al principio por razones obvias). Tiene el texto o el bloque un color de fondo gris, y el texto adoppta una tipografía y un interlineado diferentes. • CUÁNDO APLICAR: Una nota que queremos agregar como un recuadro al margen de un artículo, con información complementaria, curiosa o de interés, que funcione como una lectura en paralelo. Textos auxiliares, notas al margen, con autoría del editor o del autor. Cada párrafo marcado se convierte en un recuadro diferente (por tanto, no puede haber un recuadro compuesto de dos párrafos). Se usa a mediación del artículo, podemos colocar más de un recuadro dentro de un mismo artículo usando este recurso. Ejemplo de uso: si en un ensayo o en una entrevista se habla de una personalidad, por ejemplo, podemos colocar una lectura en paralelo con un párrafo marcado con este estilo y donde así se brinde al lector información biográfica sobre la persona mencionada. |
| LlamaDer | • APARIENCIA: Llamado (repetición de una frase destaca-da) aparte: con color naranja, con puntaje mayor, todo en cursivas, y justificado todo a la derecha. • CUÁNDO APLICAR: Una frase repetida del artículo, que sea de máximo interés, llamativa. OJO: la frase seleccionada se copia y pega, se repite, dentro del mismo artículo. |
| LlamaIzq | • APARIENCIA: Igual que “LlamaDer”, pero justificado to-do a la izquierda. |
Lista de estilos de Carácter
Los Estilos de Carácter, como su nombre indica, son estilos que solamente modifican la apariencia o los atributos de los caracteres o las letras que hayamos seleccionado previamente, manteniendo intacto el resto del párrafo. Entonces, nunca afectan otros atributos que son exclusivos de todo un párrafo, como pueden ser: interlineado, alineación o justificación, capitular, sangría, etc.
El tipo de atributos que se pueden controlar o modificar a través de los Estilos de Carácter, para aplicarlos a determinadas palabras o fragmentos de textos, por ejemplo, son los siguientes: color de esa parte del texto, puntaje en particular de ese texto, mayúsculas y minúsculas, negritas, cursivas, tachado, subrayado, subíndice o superíndice, etc.
|
Lista de estilos de Carácter |
|
|
Estilo |
Descripción |
| colorazul | • APARIENCIA: Texto en color azul y con trazo más grueso (efecto de negritas). • CUÁNDO APLICAR: Texto que por cuestiones estéticas queramos poner en color azul, para destacar, etc., como hemos hecho en esta tabla con los nombres de los estilos. • EJEMPLO DE Texto con estilo colorazul como muestra. |
| colorfoco | • APARIENCIA: Texto en color rojo y con trazo más grueso (efecto de negritas). • CUÁNDO APLICAR: Frases destacadas de un artículo, para destacarlas: las frases más importantes, curiosas o impactantes. Normalmente es suficiente usar el estilo "negritas" con este mismo objetivo. • EJEMPLO DE Texto con estilo colorfoco como muestra. |
| colfocursi | • APARIENCIA: Igual que “colorfoco”, pero además en cursivas. • CUÁNDO APLICAR: Palabras que por alguna razón aparte están en cursivas (son versos, etc.), y que queremos destacarlas. EJEMPLO DE Texto con estilo colfocursi como muestra. |
| colfalso | • APARIENCIA: Texto en color rojo marrón y con trazo más grueso (efecto de negritas). Es el texto representativo de los Chequeos (#CubaChequea) con veredicto de: Falso. • CUÁNDO APLICAR: Texto que por cuestiones estéticas queramos poner en color rojo marrón, para destacar, etc. • EJEMPLO DE Texto con estilo colfalso como muestra. |
| colverdad | • APARIENCIA: Texto en color verde y con trazo más grueso (efecto de negritas). Es el texto representativo de los Chequeos (#CubaChequea) con veredicto de: Verdad. • CUÁNDO APLICAR: Texto que por cuestiones estéticas queramos poner en color verde, para destacar, etc. • EJEMPLO DE Texto con estilo colverdad como muestra. |
| colengano | • APARIENCIA: Texto en color amarillo oscuro y con trazo más grueso (efecto de negritas). Es el texto representativo de los Chequeos (#CubaChequea) con veredicto de: Engañoso. • CUÁNDO APLICAR: Texto que por cuestiones estéticas queramos poner en color amarillo, para destacar, etc. • EJEMPLO DE Texto con estilo colengano como muestra. |
| cursivas | • APARIENCIA: Igual que “normal”, pero además en cursivas. • CUÁNDO APLICAR: Preferimos usar el botón de "cursivas" de la barra de herramientas. Se ponen en cursivas: títulos de publicaciones periódicas, títulos de libros publicados, títulos de obras de artes plásticas, películas, nombres de barcos, etc. • OJO: Ver el “Manual de Estilo”, para saber cómo, cuándo y dónde usar bien las cursivas. • EJEMPLO DE Texto con estilo cursivas como muestra. |
| mayuscul | • APARIENCIA: Todo en mayúsculas. Aunque el texto originalmente esté escrito en minúsculas, siempre lo forzará a verse en mayúsculas. • CUÁNDO APLICAR: Palabras o toda una frase que por alguna razón queremos poner en mayúsculas. • OJO: Ver el “Manual de Estilo”, para saber cómo, cuándo y dónde usar bien las mayúsculas. • EJEMPLO DE: Texto con estilo mayuscul como muestra. |
| maycursi | • APARIENCIA: Todo en mayúsculas y además en cursivas. Aunque el texto originalmente esté escrito en minúsculas y redondas, siempre lo forzará a verse en mayúsculas y cursivas. • CUÁNDO APLICAR: Cuando haya un fragmento de texto que debamos poner todo en mayúsculas y además en cursivas. Práctico: al hacerlo en fragmentos extensos, no tenemos que revisar las palabras una a una. • EJEMPLO DE: Texto con estilo maycursi como muestra. |
| minuscul | •APARIENCIA: Igual que “normal”, pero todo en minúsculas. Aunque el texto originalmente esté escrito en mayúsculas, siempre lo forzará a verse todo en minúsculas. • CUÁNDO APLICAR: Es práctico usarlo cuando queremos forzar minúsculas (toda una frase, un párrafo, etc.) • EJEMPLO DE: Texto con estilo minuscul como muestra. |
| negcursiva | • APARIENCIA: Negritas y cursivas. |
| negritas | • APARIENCIA: Negritas. • CUÁNDO APLICAR: Preferimos usar el botón de "negritas" de la barra de herramientas. Pondremos en negritas las palabras claves o frases claves que conducen el desarrollo principal del tema, de modo que el ojo del lector siguiendo solamente estos textos en negritas pueda identificar las partes principales del argumento o de la información, y de este modo también el SEO usa estas negritas para identificar y clasificar los temas. |
| puntgran | • APARIENCIA: Con un puntaje más grande que “normal”. • CUÁNDO APLICAR: Palabras o letras que por alguna razón queremos que destaquen o se vean más grandes de lo normal. Por motivos estéticos, para aumentar la apariencia de un encabezado, un título, una palabra. Por motivos semánticos, ejemplo: "Gritó muy fuerte: Libertad (puntaje grande)" • EJEMPLO DE: Texto con estilo puntgran como muestra. |
| puntpeque | • APARIENCIA: Con un puntaje más pequeño que “nor-mal”. • CUÁNDO APLICAR: Palabras o letras que por alguna razón queremos que se vean más pequeñas que “normal”. • EJEMPLO DE: Texto con estilo puntpeque como muestra. |
| tachado | • APARIENCIA: Con una raya tachando el texto. • APLICAR: Preferimos usar el botón de "tachado" de la barra de herramientas para aplicar a un texto seleccionado previamente. Cuando queremos señalar que algo ha sido tachado o censurado, pero al mismo tiempo queremos que se vea la palabra censurada o tachada. • EJEMPLO DE: Texto con estilo tachado como muestra. |
| versalitas | • APARIENCIA: Todo en versalitas (EJEMPLO). • CUÁNDO APLICAR: Nombres de autores en epígrafes, Números romanos en los siglos (el siglo XX, siglo XXI...), palabras de entradas en glosarios, etc. • OJO: Ver el “Manual de Estilo”, para saber cómo, cuándo y dónde usar bien las versalitas. • EJEMPLO DE: Texto con estilo versalitas como muestra. |
EJEMPLOS de usos de Encabezados y Estilos de Párrafo
Ejemplos de formatos
Encabezado 3
Ejemplo de Párrafo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo quam non ipsum euismod bibendum. Sed ullamcorper velit sit amet erat viverra, vel elementum velit sodales. Mauris id consequat nunc, facilisis consectetur felis. Ut lorem lacus, pellentesque id lacinia et, rutrum id libero. Nam facilisis pellentesque placerat. Vestibulum mollis placerat libero, varius tempor tortor lobortis in. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam tincidunt eu ipsum quis accumsan. Mauris id magna vitae felis condimentum iaculis. Vestibulum consequat iaculis eros vel ultrices. Integer molestie magna nec enim consectetur tempus. Nam condimentum nisi ac velit finibus pharetra. Fusce in pellentesque ante. Sed nec auctor ante.
Ejemplo de Párrafo. Duis pellentesque tortor vel eros varius porttitor. Cras porta nulla sit amet sem congue, eu viverra elit mollis. Etiam aliquet quis tortor sed facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam tincidunt egestas velit. Nullam convallis auctor arcu. Sed tempor ligula vel blandit tempor. Ut pharetra mollis tincidunt. Maecenas bibendum faucibus metus vitae tincidunt. Duis non urna eget ligula interdum bibendum sed eu mi. Donec gravida eleifend sapien id dictum. Praesent efficitur pretium elit a porta. In imperdiet hendrerit purus, scelerisque porttitor lacus vestibulum dictum.
Encabezado 4
Ejemplo de Párrafo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo quam non ipsum euismod bibendum. Sed ullamcorper velit sit amet erat viverra, vel elementum velit sodales. Mauris id consequat nunc, facilisis consectetur felis. Ut lorem lacus, pellentesque id lacinia et, rutrum id libero. Nam facilisis pellentesque placerat. Vestibulum mollis placerat libero, varius tempor tortor lobortis in. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam tincidunt eu ipsum quis accumsan. Mauris id magna vitae felis condimentum iaculis. Vestibulum consequat iaculis eros vel ultrices. Integer molestie magna nec enim consectetur tempus. Nam condimentum nisi ac velit finibus pharetra. Fusce in pellentesque ante. Sed nec auctor ante.