EditingGuide.es

Un breve manual de edición de wikis...

Cómo crear un artículo

Existen tres maneras para crear nuevos artículos en la wiki, pero el primero es el más recomendado, porque con él se garantiza que desde el principio existirá un vínculo para que sea visitado.

Siguiendo un enlace

En una sección posterior mostraré como crear vínculos internos y externos, pero acá sólo pondré el código sin mucha explicación, casi para ser copiando y pegado.

Código para crear un enlace interno:

[[Enlace a nuevo artículo]]

Resultado:

Enlace a nuevo artículo

Como el artículo al que enlaza ese vínculo no existe, la opción para crearlo aparece inmediatamente.

Desde el buscador

En el menú del costado izquierdo de la wiki aparece un cuadro para buscar o ir a un artículo.

Para crear un nuevo artículo podemos escribir el nombre que queremos asignarle, y darle al botón Ir, de manera que nos indicará que el artículo no existe, y tendremos la posibilidad de crearlo.

Desde la barra de direcciones

La tercera opción es ingresar el nombre del archivo que deseamos crear desde la barra de direcciones del navegador web que estamos utilizando. Por ejemplo, la dirección web de la wiki del Colectivo Cereza es http://www.cereza.org.mx/wiki y el link para ir a un artículo que se llama "Portada" será http://cereza.org.mx/wiki/Portada. Si queremos crear un artículo que se llame "Libertad" podemos ir directamente a la barra de direcciones de nuestro navegador web y escribir http://cereza.org.mx/wiki/Libertad, e inmediatamente se nos presentará la opción para crear un artículo con ese nombre.

Código para crear Títulos, subtítulos y otros niveles jerárquicos de texto

El primer código que utilizaré será el que crea el título para un párrafo o texto. Para iniciarlo se usa el signo de igual ( = ), y para cerrarlo se repite. Es importante señalar que sólo funcionrá si la línea inicia con ese cógido. Si escribo esto: = Título = no se visualizará como títúlo, porque está en medio de una línea, pero si lo creo en una línea nueva:

Código:

=Título=

Se mostrará así:

Título

El código para hacer subtítulos, sub-subtítulos y otras categorías ¿inferiores? es prácticamente igual, pero se debe aumentar el número de signos de igual (=). Así, para un subtítulo tendríamos que usar doble signo de igual (==) para abrir, y repetirlo para cerrar (==). Acá un ejemplo de subtítulo:

Código:

==Subtítulo== 

resultado:

Subtítulo

Y así sucesivamente: sub-subtítulo: Código:

===Sub-subtítulo===

Resultado :

Sub-subtítulo

Luego una lista de lo que ocurre si agrego más y más signos de igualdad antes y después de la palabra o frase que deseo utilizar como título:

Título

Subtítulo

Sección

Subsección

Sub-sub-sección

Algo muy importante al usar estos códigos es señalar que el sistema de nuestro wiki generará automáticamente una tabla a manera de índice en la que habrá hipervínculos (o links) a cada título, subtítulo, etcétera, que hayamos creado mediante el uso del símbolo de igual. El ejemplo más claro es precisamente el que puede ver al inicio de este documento.

Acá el código que genera la que está arriba del párrafo anterior:

=Título=
==Subtítulo==
===Sección===
====Subsección====
=====Sub-subsección=====
======Sub-sub-sección======

Negritas

Para usar negritas debemos usar triples comillas simples antes y después de la letra, palabra o frase que queremos que tenga esa característica.

Código_

'''Una frase en negritas'''

Resultado:

Una frase en negritas

Uso de comillas simples

En el ejemplo anterior se explica cómo mostrar en negritas una frase o palabra mediante el uso de las comillas simples. Y en el primer ejemplo, el de los títulos, mostramos cómo el nivel de título que usemos depende del número de símbolos de igual que usemos. Ahora aplicaremos esa lógica, la del número de veces en las que se repite el símbolo que establece la característisca, para el uso de las comillas simples.

Si usamos dos comillas simples al principio de una palabra o frase, y dos al final, el resultado será éste: cursivas.

Si usamos cuatro comillas simples al principio y al final de la frase o palabra, el resultado será éste: 'negritas dentro de comillas simples'.

Si usamos cinco... Negritas en cursivas . Negritas en cursivas

Si usamos seis: ' Negritas en cursivas dentro de comillas simples '

Si usamos siete o más sólo agregaremos más comillas simples antes y después de la frase o palabra.: ''Rara la vida''

Sangrías

Si iniciamos una línea con el símbolo de los dos puntos estableceremos una sangría para esa línea.

Código:

Esta línea no tiene sangría.
:Ésta sí
Ésta no.
:Ésta sí

Resultado:

Esta línea no tiene sangría.

Ésta sí

Ésta no.

Ésta sí

Si deseamos incrementar la sangría para una línea sólo necesitamos incrementar el número de repeticiones del doble punto:

Código:

Esta línea no tiene sangría.
:Esta línea sí tiene sangría.
::Esta línea tiene doble sangría
:::Esta línea tiene triple sangría

Resultado:

Esta línea no tiene sangría.

Esta línea sí tiene sangría.

Esta línea tiene doble sangría

Esta línea tiene triple sangría

Enlaces

Enlaces internos

Los enlaces internos serán útiles tanto para navegar dentro de los artículos de la wiki, como para proponer la creación, o crear nuevos artículos.

El código para crear un enlace interno es el siguiente:

[[Portada]]

Y el resultado del código anterior es éste:

Portada

En el caso el artículo portada SÍ existe, por lo que al hacer click en él iremos a ver su contenido, pero si el artículo no existiera se nos presentaría la opción de crearlo. De ahí que decía que los enlaces internos son útiles tanto para navegar dentro de la wiki, como para crear o proponer la creación de nuevos artículos.

El siguiente artículo, por ejemplo, no existe.

Código:

[[Un artículo que no existe]]

Resultado:

Un artículo que no existe

Nota: si alguien crea este artículo que usamos como muestra para algo que NO EXISTE, el ejemplo dejará de valer. Por favor, absténganse de crearlo. Gracias.

Enlaces externos

Los enlaces externos serán útiles para apuntar hacia contenidos que no están dentro de la wiki, y se utilizan de la siguiente manera:

Código:

[http://www.ejemplo.com Título del enlace]

Resultado:

Título del enlace

El resultado es un link que nos dirige a una página fuera de la wiki.

Como se puede apreciar, el código consta de dos partes que van dentro de corchetes. La primera parte es la dirección web de la página a la que queremos que nos lleve el enlace, y la segunda es el título que queremos darle a ese enlace. El código que tendríamos usar para ir al portal principal del Colectivo Cereza sería:

Código:

[http://www.libreplanet.org Página principal de Libreplanet]

Y el resultado sería:

Página principal de LibrePlanet

Cuadros de texto

A lo largo de este tutorial hemos estado usando cuadros como el siguiente para señalar la manera en la que se deben usar los códigos, pero hemos olvidado señalar de qué manera crearlos:

Un cuadro de texto

Un cuadro de texto puede ser una de las herramientas más útiles con las que contamos, y sin duda la más sencilla de utilizar.

Lo único que se necesita es iniciar la línea con un espacio en blanco, seguido del contenido que queremos poner dentro de él. Fácil y rápido. :)

Subrayado

Vale la pena señalar que al editar una wiki podemos usar tanto los códigos establecidos el uso específico de las wikis, como códigos html, que son usados para crear y editar páginas web. Lo recomendables es usar el código de las wikis en vez de código html, pero siempre es bueno tener las dos opciones.

Así, el código:

<h1>Título</h1>  (que es html)

Y

=Título= (que es wiki)

Generarán exactamente el mismo resultado visual.

Para el subrayado, usaremos un código que funciona dentro de las wikis, pero que es propiamente lenguaje html.

Código:

<u>subrayado</u>

Resultado:

subrayado

Listas

lista numerada

Para hacer una lista numerada lo único que necesitamos es iniciar la línea de cada uno de sus miembros con un signo de número (#).

Código:

# Primer elemento de la lista
# Segundo elemento de la lista
# Tercer elemento de la lista

Resultado:

1. Primer elemento de la lista
2. Segundo elemento de la lista
3. Tercer elemento de la lista

Listas con viñetas

Para hacer una lista sin numeración, pero con viñetas, usamos el asterisco (*)

Código:

* Primero elemento de la lista
* Segundo elemento de la lista
* Tercer elemento de la lista

Resultado:

• Primero elemento de la lista
• Segundo elemento de la lista
• Tercer elemento de la lista

Listas anidadas

Para anidar (agregar sangría a un elemento dentro de la lista para que aparezca en un subnivel de otro), se pude repetir cualquiera de los dos símbolos que usamos para crear listas.

Código:

# Primer elemento de la lista
## Elemento anidado al primer elemento de la lista
# Segundo elemento

Resultado:

1. Primer elemento de la lista
   1. Elemento anidado al primer elemento de la lista
2. Segundo elemento

Lo mismo ocurre con las viñetas:

Código:

* Primer elemento de la lista
** Elemento anidado al primer elemento de la lista
* Segundo elemento

Resultado:

• Primer elemento de la lista
  • Elemento anidado al primer elemento de la lista
• Segundo elemento

Agregar una imagen al artículo

Para mostrar una imagen en el artículo debemos usar el siguiente código:

[[Imagen:imagen.jpg]]

Pero no servirá de mucho, ni mostrará una imagen, si no existe previamente una imagen cuyo nombre sea imagen.jpg

De cualquier manera, puede ser el primer paso para subir la imagen a nuestro servidor, y entonces sí, mostrarla en el artículo.

Una vez insertado el código debemos Grabar la página y se nos mostrará el artículo publicado. El código para mostrar la imagen aún estará ahí, porque la imagen aún no está en el servidor. Naturalmente, no veremos los corchetes, pero sí un enlace como este:

El siguiente paso es dar click en ese enlace, y entonces iremos a una pantalla en la que podemos subir la imagen al servidor.

Es necesario asignarle un nombre, y si lo deseamos una descripción. Después daremos click en "Subir un archivo"

¡Listo! la imagen ahora estará disponible y se mostrará en el artículo.

Vale la pena apuntar que si la imagen que deseamos agregar al artículo ya se encuentra en el servidor, no es necesario volver a subirla, y usar el código:

Imagen:imagen.jpg

con el nombre correcto de la imagen que deseamos agregar bastará para que ésta aparezca.

Tablas

Aunque la creación de tablas puede parecer en un principio complicado, después de hacer un par de ellas, o sin hacer ninguna, pero entendiendo lo lógica, será sencillo.

Para no desencajar, otra vez hay varias formas de hacerlo; para desencajar, mostraremos (al menos por ahora) solamente una.

Crear una tabla sencilla

Para crear una tabla exclusivamente con código wiki dependemos de 4 símbolos: las llaves ({,}), la barra horizontal (|), y el guión (-).

La tabla entera deberá ir entre llaves y barras horizontales, así que eso es lo primero:

{| para iniciar

y

|} para terminar

Después, columna por columna, y línea por línea, vamos armando la tabla.

Una barra horizontal servirá para marcar el inicio de cada celda y una barra horizontal seguida de un guión marcará el cambio de línea. Así

| Todo esto va dentro de la primera línea
| Y todo esto dentro de la segunda

Generarían esta tabla, que tiene dos columnas y una sola línea

Código:

 {|
 | Esto va dentro de la primera celda de la primera línea
 | Y esto dentro de la segunda celda en la primera línea
 |}

Resultado:

Esto va dentro de la primera celda de la primera línea

Y esto dentro de la segunda celda en la primera línea

¿no parece tabla? Debe ser porque no tiene bordes :), pero se los podemos poner. Eso se indica en la primera línea, justo después de la llave y la barra que indican que ahí inicia una tabla.

Establecer el ancho del borde de una tabla

El código quedaría así:

Código:

 {| border="1"
 | Esto va dentro de la primera celda de la primera línea
 | Y esto dentro de la segunda celda en la primera línea
 |}
 

Resultado:

Esto va dentro de la primera celda de la primera línea

Y esto dentro de la segunda celda en la primera línea

Cómo definir el ancho de una tabla

Como se ve un poco amontonado, estableceremos el ancho de la tabla mediante el el código width="" (en ingles significa "ancho"), que también irá en la primera línea, y que llevará entre las comillas el ancho que deseamos asignarle.

Código:

 {| border="1" width="800"
 | Esto va dentro de la primera celda de la primera línea
 | Y esto dentro de la segunda celda en la primera línea
 |}
 

Resultado:

Esto va dentro de la primera celda de la primera línea

Y esto dentro de la segunda celda en la primera línea

Agregar líneas a una tabla

Ahora agregaremos una segunda línea usando la barra horizontal y un guión, y repitiendo el código anterior para cada celda de esa línea.

Código:

 {| border="1" width="800"
 | Esto va dentro de la primera celda de la primera línea
 | Y esto dentro de la segunda celda en la primera línea
 |-
 | Esto va dentro de la primera celda de la segunda línea
 | Y esto dentro de la segunda celda en la segunda línea
 |}
 

Resultado:

Esto va dentro de la primera celda de la primera línea	Y esto dentro de la segunda celda en la primera línea
Esto va dentro de la primera celda de la segunda línea	Y esto dentro de la segunda celda en la segunda línea

Ejemplo de tabla con varias líneas y varias columnas

Y si deseamos tener una tabla de 4 columnas y 6 líneas con un ancho de 600 pixeles.....

Código

 {| border="1" width="600"
 | lNeA 1, cOLUmNa 1
 | líNEa 1, cOlUmnA 2
 | LiNeA 1, cOmUnA 3
 | LIneA 1, c0mUnIta 4
 |-
 | lINeA 2, cOLUmNa 1
 | líNEa 2, cOlUmnA 2
 | LiNeA 2, cOmUnA 3
 | LIneA 2, c0mUnIta 4
 |-
 | lINeA 2, cOLUmNa 1
 | líNEa 2, cOlUmnA 2
 | LiNeA 2, cOmUnA 3
 | LIneA 2, c0mUnIta 4
 |-
 | lINeA 3, cOLUmNa 1
 | líNEa 3, cOlUmnA 2
 | LiNeA 3, cOmUnA 3
 | LIneA 3, c0mUnIta 4
 |-
 | lINeA 4, cOLUmNa 1
 | líNEa 4, cOlUmnA 2
 | LiNeA 4, cOmUnA 3
 | LIneA 4, c0mUnIta 4
 |-
 | lINeA 5, cOLUmNa 1
 | líNEa 5, cOlUmnA 2
 | LiNeA 5, cOmUnA 3
 | LIneA 5, c0mUnIta 4
 |-
 | lINeA 6, cOLUmNa 1
 | líNEa 6, cOlUmnA 2
 | LiNeA 6, cOmUnA 3
 | LIneA 6, c0mUnIta 4
 |}
 

Resultado:

lINeA 1, cOLUmNa 1	líNEa 1, cOlUmnA 2	LiNeA 1, cOmUnA 3	LIneA 1, c0mUnIta 4
lINeA 2, cOLUmNa 1	líNEa 2, cOlUmnA 2	LiNeA 2, cOmUnA 3	LIneA 2, c0mUnIta 4
lINeA 2, cOLUmNa 1	líNEa 2, cOlUmnA 2	LiNeA 2, cOmUnA 3	LIneA 2, c0mUnIta 4
lINeA 3, cOLUmNa 1	líNEa 3, cOlUmnA 2	LiNeA 3, cOmUnA 3	LIneA 3, c0mUnIta 4
lINeA 4, cOLUmNa 1	líNEa 4, cOlUmnA 2	LiNeA 4, cOmUnA 3	LIneA 4, c0mUnIta 4
lINeA 5, cOLUmNa 1	líNEa 5, cOlUmnA 2	LiNeA 5, cOmUnA 3	LIneA 5, c0mUnIta 4
lINeA 6, cOLUmNa 1	líNEa 6, cOlUmnA 2	LiNeA 6, cOmUnA 3	LIneA 6, c0mUnIta 4

Cómo definir el color de fondo y de letra de una tabla

También le podemos definir el color de fondo, establecer un color de letra, el ancho del borde, el alto y ancho de columna, y muchas otras kosas (notese que ahora metemos los atributos de la tabla en un estilo "style=")

Código:

 {| style="background:gray; color:white; width:400px; height:200px" border="10"
 | primera línea, primera columna
 | Primera línea, segunda columna
 |-
 | Segunda línea, primera columna
 | Segunda línea, segunda columna
 |}
 

Resultado:

primera línea, primera columna	Primera línea, segunda columna
Segunda línea, primera columna	Segunda línea, segunda columna

Colores

También hay dos maneras de ingresar colores, una es mediante palabras clave, y la otra mediiante combinación de colores rojo-verde-azul, o RGB que viene de Red-Green-Blue.

En "palabras clave"

En el ejemplo anterior usamos las palabras clave "gray", gris, para el fondo, (background), y "white", blanco, para el color de las letras (color). Pero basta sustituir cualquiera de esas dos palabras clave por otras referenciadas a otro color, para que la kosa cambie.

En el caso de el uso de palabras clave sólo es necesario ponerelas después de los dos puntos, y no hace diferencia que se haga en mayúsculas o minúsculas.

Pego acá una tabla de colores con palabras claves de varios colores que me encontré en la documentación oficial de wikimedia.

Black	DarkGreen	MidnightBlue	DarkSlateGray	Navy
Green	Maroon	DarkBlue	DarkRed	DarkOliveGreen
ForestGreen	Indigo	SaddleBrown	DarkSlateBlue	SeaGreen
Brown	Teal	Purple	Olive	OliveDrab
DimGray	FireBrick	Sienna	DarkCyan	DarkMagenta
MediumBlue	LimeGreen	MediumSeaGreen	Gray	SlateGray
DarkGoldenrod	Crimson	SteelBlue	Chocolate	LightSlateGray
MediumVioletRed	IndianRed	CadetBlue	SlateBlue	LightSeaGreen
Peru	Blue	Lime	Red	RoyalBlue
DarkViolet	DarkOrchid	YellowGreen	OrangeRed	BlueViolet
Goldenrod	DarkSeaGreen	RosyBrown	LawnGreen	Tomato
DarkKhaki	SpringGreen	Chartreuse	MediumAquamarine	MediumPurple
PaleVioletRed	MediumSlateBlue	DarkOrange	DarkGray	DarkTurquoise
MediumSpringGreen	MediumOrchid	DodgerBlue	DeepPink	Coral
CornflowerBlue	LightCoral	MediumTurquoise	DarkSalmon	Salmon
Orange	SandyBrown	Tan	GreenYellow	Turquoise
LightGreen	BurlyWood	DeepSkyBlue	LightSalmon	Orchid
HotPink	PaleGreen	Silver	Gold	SkyBlue
LightSteelBlue	LightSkyBlue	Plum	Aquamarine	LightBlue
Thistle	Aqua	Cyan	Fuchsia	Magenta
Yellow	Khaki	Violet	LightGrey	PowderBlue
LightPink	PaleGoldenrod	Wheat	Pink	PaleTurquoise
NavajoWhite	Gainsboro	PeachPuff	Moccasin	Bisque
BlanchedAlmond	AntiqueWhite	PapayaWhip	MistyRose	Lavender
Beige	LightGoldenrodYellow	LemonChiffon	Linen	Cornsilk
OldLace	WhiteSmoke	Honeydew	LightCyan	LightYellow
Seashell	LavenderBlush	AliceBlue	FloralWhite	MintCream
Azure	Ivory	GhostWhite	Snow	White

En "RGB"

Los colores también se pueden definir como combinación de los tres colores básicos: rojo verde y azul: RGB, si se quiere emplear este modo, hay que poner el signo almohadilla (#, también conocida como símbolo de número o gato) seguido de los valores de rojo verde y azul en RGB, como en los ejemplos.

Acá una tabla que saqué del mismo lugar, en el que hay otros colores, pero en RGB.

#000000	#004400	#008800	#00cc00	#00ff00
#440000	#444400	#448800	#44cc00	#44ff00
#880000	#884400	#888800	#88cc00	#88ff00
#cc0000	#cc4400	#cc8800	#cccc00	#ccff00
#ff0000	#ff4400	#ff8800	#ffcc00	#ffff00

#000044	#004444	#008844	#00cc44	#00ff44
#440044	#444444	#448844	#44cc44	#44ff44
#880044	#884444	#888844	#88cc44	#88ff44
#cc0044	#cc4444	#cc8844	#cccc44	#ccff44
#ff0044	#ff4444	#ff8844	#ffcc44	#ffff44

#000088	#004488	#008888	#00cc88	#00ff88
#440088	#444488	#448888	#44cc88	#44ff88
#880088	#884488	#888888	#88cc88	#88ff88
#cc0088	#cc4488	#cc8888	#cccc88	#ccff88
#ff0088	#ff4488	#ff8888	#ffcc88	#ffff88

#0000cc	#0044cc	#0088cc	#00cccc	#00ffcc
#4400cc	#4444cc	#4488cc	#44cccc	#44ffcc
#8800cc	#8844cc	#8888cc	#88cccc	#88ffcc
#cc00cc	#cc44cc	#cc88cc	#cccccc	#ccffcc
#ff00cc	#ff44cc	#ff88cc	#ffcccc	#ffffcc

#0000ff	#0044ff	#0088ff	#00ccff	#00ffff
#4400ff	#4444ff	#4488ff	#44ccff	#44ffff
#8800ff	#8844ff	#8888ff	#88ccff	#88ffff
#cc00ff	#cc44ff	#cc88ff	#ccccff	#ccffff
#ff00ff	#ff44ff	#ff88ff	#ffccff	#ffffff

Cómo definir el estilo de líneas y celdas

Por supuesto, también es posible establecer atributos específicos para cada línea e incluso para cada celda.

Código:

 {| style="width:400px; height:200px" border="10"
 | style="background:black; color:red" | Primera línea, primera columna
 | style="background:red; color:black" | Primera línea, segunda columna
 |-
 | style="background:#44cc00; color:blue" |Segunda línea, primera columna
 | style="background:#88cc00; color:#ffffff" |Segunda línea, segunda columna
 |}
 

Resultado:

Primera línea, primera columna	Primera línea, segunda columna
Segunda línea, primera columna	Segunda línea, segunda columna

Alineación vertical y horizontal dentro de las tablas

Para terminar con las tablas, veamos la alineación. Para eso tenemos los valores "align=" y "valign=" que determinan la alineación horizontal y la vertical, respectivamente, y también respectivamete, aceptan los valores, left, center y right (izquierda, centro derecha), y top, center, bottom (arriba, centro, abajo).

Código:

 {| style="width:500px; height:500px" border="10" 
 | style="background:gray; color:yellow" align=right valign=bottom | ¡abajo la derecha!
 | style="background:skyblue; color:white" align=center valign=top | <br><font size="20">*</font><br>arriba y al centro <br> La bella estrella polar
 |-
 | style="background:black; color:red" align=left valign=bottom | abajo y a la izquierda <br> (está el corazón)<br>EZLN, México.
 | style="background:#88cc00; color:#ffffff" align=center valign=center |Centro, centro
 |}
 

Notas:

• el <br> que puse en la segunda columna de la primera línea, y en la primera columna de la segunda línea sirve para iniciar una nueva línea (como dar enter, pues).
• el <font size="20"> que puse en la segunda columna de la primera línea hace que el asterisco se vea graaaande (como una estrellota) y como lo cierro exactamente después del asterisco (con </font>), el resto de las letras se ven del mismo tamaño que todas las demás.

Resultado:

¡abajo la derecha!	* arriba y al centro La bella estrella polar
abajo y a la izquierda (está el corazón)	Centro, centro