●About
●About LibrePlanet
●Mission Statement
●Founding documents
●Support this Community
●Code of Conduct
●Anti-harassment policy
●Teams
●Activists
●Wiki Helpers
●LibrePlanet Artists
●FSF Community Team
●Local & Student Teams
●Conferences
●LibrePlanet Conference
●Non-official
●Get involved
●Participate
●Discussion channels
●Events
●Login
Un breve manual de edición de wikis...
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.
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:
Como el artículo al que enlaza ese vínculo no existe, la opción para crearlo aparece inmediatamente.
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.
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.
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í:
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:
Y así sucesivamente: sub-subtítulo: Código:
===Sub-subtítulo===
Resultado :
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:
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======
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
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''
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 no.
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.
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:
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:
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.
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:
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
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. :)
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
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:
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:
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:
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:
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.
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.
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.
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 |
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 |
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 |
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 |
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 |
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 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 |
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 |
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 |
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:
Resultado:
| ¡abajo la derecha! |
* arriba y al centro La bella estrella polar |
| abajo y a la izquierda (está el corazón) |
Centro, centro |
The Free Software Foundation (FSF) is a nonprofit with a worldwide mission to promote computer user freedom.
We defend the rights of all software users. (Read more)