Ayuda:Guía de Edición de Contenidos Textuales

Guía de Edición de Textos

Da formato a tus textos para que se lean claros: encabezados, listas, estilos, enlaces, citas y tablas.

Haz clic en cada sección para desplegarla. Puedes ir directo a lo que necesitas o recorrerlas en orden.

¿Tienes dudas o algo no quedó claro? Escríbenos a wiki@ead.cl y te ayudamos.

Títulos y encabezados

El título grande de la página (H1) se genera solo a partir del nombre de la página: no lo escribas en el cuerpo. La jerarquía que sí editas empieza en == y baja un nivel por cada signo que sumes. Con tres o más encabezados, la wiki arma sola la tabla de contenidos.

Reglas simples:

• Suma un signo por nivel: ==, ===, ====…
• No saltes niveles (no pongas ==== justo después de == sin un === intermedio).

Código:

== Sección principal ==
=== Sub-sección ===
==== Agrupación menor ====
===== Apostilla =====

Así se ve aplicado:

Sección principal

Sub-sección

Agrupación menor

Apostilla

Detalle de diseño: el acento carmín recae en los niveles impares (sección principal, apostilla); los pares van en tinta. Es automático, no tienes que hacer nada.

Listas

Listas ordenadas

Enumeran elementos de forma secuencial usando números.

Código:

# Ítem 1
# Ítem 2
## Ítem 2.1
## Ítem 2.2
### Ítem 2.2.1

Así se ve aplicado:

1. Ítem 1
2. Ítem 2
   1. Ítem 2.1
   2. Ítem 2.2
      1. Ítem 2.2.1

Listas desordenadas

Usan viñetas para elementos sin un orden específico.

Código:

* Ítem
* Ítem
*# Sub-ítem
*#* Sub-sub-ítem

Así se ve aplicado:

• Ítem
• Ítem
  1. Sub-ítem
     • Sub-sub-ítem

Estilos de texto

Los estilos ayudan a destacar la información más importante. Estos son los de la sintaxis wiki, que funcionan en cualquier parte:

Código:

'''negrita'''
''cursiva''
'''''negrita y cursiva'''''

Así se ve aplicado:

• Negrita: negrita
• Cursiva: cursiva
• Negrita y cursiva: negrita y cursiva

Estilos semánticos del skin (color, tamaño, familia)

¿Por qué "semántico" y no un color a mano?

La wiki tiene dos modos de lectura: claro (tinta oscura sobre papel claro) y oscuro (tinta clara sobre fondo oscuro). Cada lector elige el suyo desde su menú. El problema: si fijas un color a mano —por ejemplo negro (#000)— se ve bien en claro pero desaparece en oscuro (negro sobre fondo oscuro).

La solución del sistema son los tokens: nombres como --sn-ink ("tinta") o --sn-nova ("acento") que guardan la intención, no un color fijo. El skin decide el valor real según el modo, así que el texto siempre queda legible. No usas los tokens directamente: los usan por ti las clases de abajo. Tú nombras el rol —"esto es el acento", "esto es un error"— y el color correcto lo pone el sistema, en claro y en oscuro.

En vez de…	Usa…	Porque…
<span style="color:#000">texto</span>	<span class="nova">texto</span>	el negro fijo se pierde en modo oscuro; nova voltea solo.

Cómo se usan

Se escriben con <span> o <div> y el atributo class, y se combinan libremente (por ejemplo class="lg serif nova").

Eje	Clases
Tamaño	jumbo · lg · (cuerpo, sin clase) · sm · xs
Familia	serif · sans · mono
Énfasis	uppercase · italic · bold
Alineación	left · center · right · justify
Color semántico	nova (acento) · ok (correcto) · warn (atención) · danger (error)

Tamaño

Código:

<p class="jumbo">Titular jumbo</p>
<p class="lg">Destacado (lg)</p>
<p class="sm">Secundario (sm)</p>
<p class="xs">Pie / nota (xs)</p>

Así se ve aplicado:

Titular jumbo

Destacado (lg)

Secundario (sm)

Pie / nota (xs)

Familia

Código:

<span class="serif">Forzado a serif</span>
<span class="sans">Forzado a sans</span>
<span class="mono">Forzado a mono</span>

Así se ve aplicado: Forzado a serif Forzado a sans Forzado a mono

Énfasis

Código:

<span class="uppercase">Versalita real</span>
<span class="italic">Cursiva</span>
<span class="bold">Negrita</span>

Así se ve aplicado: Versalita real Cursiva Negrita

Alineación

Código:

<div class="center">
Texto centrado. Aunque la wiki lo
envuelva en su < p >, queda centrado.
</div>
<div class="right">Alineado a la derecha</div>

Así se ve aplicado:

Texto centrado. Aunque la wiki lo envuelva en su < p >, queda centrado.

Alineado a la derecha

Color semántico

Código:

<span class="nova">Marca / acento</span>
<span class="ok">Correcto</span>
<span class="warn">Atención</span>
<span class="danger">Error</span>

Así se ve aplicado: Marca / acento Correcto Atención Error

Accesibilidad: no uses el color como único indicador de significado. Acompaña el rojo de "error" o el verde de "correcto" con una palabra o un ícono. Para fondos de aviso en bloque usa las bandas fondo-*, no estas clases de color de texto.

Enlaces

Enlaces internos (dentro de la wiki)

Los enlaces internos conectan páginas dentro de Casiopea y ayudan a construir la estructura de información.

Código básico:

Voy a crear una [[nueva página]].

El texto dentro de [[ ]] es el nombre de la página. Si quieres mostrar un texto distinto, sepáralo con |:

Código con texto alternativo:

Voy a vincular a una [[página existente|página]].
Voy a vincular a [[Usuario:scarlethosorio|la página de Scarleth]].
Voy a definir una [[Categoría:Diseño|categoría fundamental]].

Así se ve aplicado:

Voy a vincular a una página.

Voy a vincular a la página de Scarleth.

Un enlace en rojo indica que la página aún no existe: al hacer clic, la creas.

Enlaces externos (fuera de la wiki)

Código:

http://www.ead.pucv.cl/
[http://www.ead.pucv.cl/ Escuela de Arquitectura y Diseño - PUCV]

Así se ve aplicado:

http://www.ead.pucv.cl/

Escuela de Arquitectura y Diseño - PUCV

Los enlaces externos aparecen con un pequeño ícono de flecha, para distinguirlos de los internos.

Tipos de texto especiales

Formato poema

Mantiene el formato original del texto —conserva los quiebres de línea y los espacios al inicio—, ideal para poesía. Usa la serif editorial del skin.

Código:

<poem>
¿Dónde están sus monumentos, sus batallas, sus mártires?
¿Dónde su memoria tribal? Señores,
en esa bóveda gris. El mar. El mar
los ha aprisionado. El mar es la Historia.
</poem>

Así se ve aplicado:

¿Dónde están sus monumentos, sus batallas, sus mártires?
¿Dónde su memoria tribal? Señores,
en esa bóveda gris. El mar. El mar
los ha aprisionado. El mar es la Historia.

Cita (blockquote)

Destaca fragmentos de texto o citas de otros autores. También usa la serif de contraste del skin.

Código:

<blockquote>El hombre sólo puede construir gratuitamente su casa. Porque habitar es construir lo gratuito.</blockquote>

Así se ve aplicado:

El hombre sólo puede construir gratuitamente su casa. Porque habitar es construir lo gratuito.

Referencias bibliográficas

Permiten agregar notas y referencias a tus textos.

Código:

"Texto de la cita" <ref>Referencia aquí</ref>.

Ejemplo aplicado:

"El territorio ya no precede al mapa, ni lo sobrevive. De aquí en adelante, es el mapa el que precede al territorio."

Para más información sobre esta extensión: Extensión Cite en MediaWiki

Quiebre de línea

Usa <br> para dividir el texto en líneas separadas dentro de un mismo párrafo.

Código:

esta <br> es una <br> prueba

Así se ve aplicado:

esta
es una
prueba

Texto desplegable

Permite ocultar y mostrar bloques de texto, útil para despejar la vista en páginas largas.

Se necesitan dos elementos:

1. Un gatillador — el texto o botón que activa el comportamiento.
2. Un contenedor — el bloque de contenido que se expande u oculta.

El gatillador lleva la clase mw-customtoggle-nombre y el contenedor lleva el id mw-customcollapsible-nombre, donde nombre debe ser el mismo en ambos y único en la página.

Código:

<span class='mw-customtoggle-ejemplo1 link-toggle'>Esto despliega texto</span>

<div class='mw-collapsible mw-collapsed' id='mw-customcollapsible-ejemplo1'>
Aquí va el contenido que se oculta y muestra.
</div>

Así se ve aplicado:

Esto despliega texto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus sem massa, eget placerat purus vehicula vel. Phasellus arcu elit, hendrerit ac nisl eu, fermentum rutrum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi pharetra accumsan rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam non egestas mi. Duis molestie elit lorem, vel auctor eros scelerisque quis. Sed ut auctor sem. Vivamus vel purus eros. Nulla congue, mauris at ultrices rhoncus, sem dui congue orci, quis egestas ipsum nisl at magna. Aenean metus eros, porttitor ut neque pulvinar, eleifend consequat erat. Vivamus eget mi ante. Ut in commodo quam. Suspendisse arcu tortor, fringilla in ligula sed, congue sagittis mi. Aliquam dictum sapien ut velit fermentum, ut commodo ligula tristique. Morbi et nulla enim.

Nam non pellentesque nisl. Quisque est quam, ultrices et enim sed, posuere consectetur augue. Pellentesque id quam pharetra, pulvinar erat id, accumsan nibh. Nam id vulputate nunc, ac sagittis leo. Nunc eu accumsan nulla, non aliquam velit. Aenean enim massa, dapibus in tincidunt iaculis, maximus sit amet libero. Aenean dignissim, tortor non rutrum pellentesque, ipsum nulla posuere ex, ac laoreet nisl purus hendrerit sem. Sed purus dui, dapibus vel volutpat ut, placerat hendrerit arcu. Aliquam quam quam, porttitor et fringilla in, tempus sit amet purus. Nulla vel imperdiet nibh.

Duis eleifend metus nec augue cursus rutrum. Vivamus luctus nisi ut orci egestas lacinia. Fusce risus sem, tristique sit amet lectus sit amet, molestie rhoncus massa. Nulla eu felis felis. Morbi consectetur diam eleifend tempus tincidunt. Nulla id fringilla erat, at dictum dui. Sed fermentum tincidunt justo et scelerisque. Pellentesque vitae lacus eget neque convallis blandit quis et enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in mollis sapien, quis rutrum velit. Fusce eu feugiat ante. Donec lacinia sollicitudin nibh sed pellentesque. Quisque laoreet sodales justo sit amet tempor. Donec pellentesque nibh vel eleifend pulvinar.

Phasellus elementum efficitur enim ac finibus. Sed pulvinar elit sit amet est porttitor efficitur. Suspendisse diam nisi, finibus sed dictum eget, mollis commodo augue. Phasellus aliquam laoreet dignissim. Aliquam ut sagittis tortor, quis sollicitudin justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus viverra eu lorem non consectetur. Etiam a ante augue. In nisi mauris, laoreet id lacus eget, viverra aliquet tellus. Sed quis sodales erat.

Fusce consequat mauris eu est ullamcorper tincidunt. Pellentesque non purus vel arcu feugiat ultricies. Integer eget blandit risus, nec eleifend tortor. Aliquam id lorem fringilla, scelerisque risus id, placerat diam. Nunc blandit velit dolor, suscipit hendrerit dui tristique id. Praesent mollis convallis purus. Curabitur interdum sollicitudin ligula non aliquet.

También puedes iniciar el contenedor abierto eliminando la clase mw-collapsed.

Tablas

Las tablas usan la clase wikitable, que el skin presenta de forma minimalista: solo filetes horizontales, sin bordes verticales ni rellenos de color, con el texto alineado a la izquierda.

No agregues colores de fondo (background-color) ni tipografías propias (font-family) a las tablas: rompen el modo oscuro y la coherencia del sistema. Deja solo class="wikitable" y el skin se encarga del resto.

Código:

{| class="wikitable"
|+ Escala tipográfica del sistema
! Token !! Rol !! Familia
|-
| --sn-fs-display || Título display || text
|-
| --sn-fs-lg || Sub-sección || text
|-
| --sn-fs-base || Cuerpo || text
|}

Así se ve aplicado:

Escala tipográfica del sistema

Token	Rol	Familia
--sn-fs-display	Título display	text
--sn-fs-lg	Sub-sección	text
--sn-fs-base	Cuerpo	text

Ficha (tabla clave→valor)

Si agregas el modificador plantilla (class="wikitable plantilla"), la tabla se convierte en una ficha vertical: sin filetes internos, con la etiqueta a un lado y el valor al otro. Es lo que usan las fichas de proyecto, persona, etc.

Código:

{| class="wikitable plantilla"
! Tipo de Proyecto
| Proyecto de Curso
|-
! Año
| 2016
|-
! Carrera
| Diseño Gráfico
|}

Así se ve aplicado:

Tipo de Proyecto	Proyecto de Curso
Año	2016
Carrera	Diseño Gráfico

Puedes armar la estructura con Tables Generator, pero borra los estilos de color y tipografía que agrega y deja solo class="wikitable".

Palabras mágicas

Las palabras mágicas son interruptores invisibles: las escribes en cualquier parte del wikitexto, no producen texto visible, pero cambian cómo se muestra la página. Van entre doble guión bajo y son sensibles a mayúsculas (__notitle__ en minúscula no funciona).

Las más útiles:

Palabra mágica	Para qué sirve
__TOC__	Coloca la tabla de contenidos justo en ese punto.
__NOTOC__	Oculta la tabla de contenidos de la página.
__FORCETOC__	Fuerza la tabla de contenidos aunque haya menos de tres encabezados.
__NOTITLE__	Oculta el título grande (H1) automático de la página.
__NOEDITSECTION__	Quita los enlaces "editar" que aparecen junto a cada encabezado.
__PANTALLACOMPLETA__	Modo lienzo: la página ocupa todo el ancho, sin cabecera ni menús. Sinónimo: __FULLSCREEN__. Pensada para portadas o visualizaciones. (Avanzado.)

Ejemplo real: esta misma guía empieza con __NOTITLE__ __NOEDITSECTION__ para ocultar el título duplicado y limpiar los enlaces de edición.

Combinación útil (avanzada): __NOTITLE__ + __PANTALLACOMPLETA__ + una primera imagen con class=full-width arma una portada "a sangre", de borde a borde, sin que el título choque.

→ Todas las palabras mágicas

---

← Volver a las guías Siguiente: editar imágenes →