Guía de Formato

El formato puede desempeñar un papel importante para que los lectores se interesen más en sus artículos. Un buen formato es una gran ventaja, y esta guía cubrirá todo, desde los conceptos básicos y esenciales hasta la introducción al estilo CSS.

Visite el Centro de Widgets para obtener una colección de módulos, formatos y temas

---

Formatos de Artículos

Formatos de Artículos

Plantillas de Artículos Básicos

[[include component:rate]]

CÓDIGO DE BLOQUE DE IMAGEN (SI E APLICABLE)

SÍMBOLO DE CLASE DE OBJETO

**Código de Fenómenos Registrados:** XXX

**Clase de Objeto:** Alfa/Beta/Gamma (grado de contención) - Amarillo/Naranja/Rojo (grado de letalidad)

**Tipos de Peligros:**

**Protocolos de Contención:** [Párrafos que explican los procedimientos]

**Descripción:** [Párrafos que explican la descripción]

**Apéndice/Anexo:** y/o **Descubrimiento:** [Párrafos adicionales opcionales]

[[footnoteblock]]

[[=]]
<< [[[RPC-XXX]]] | RPC-XXX | [[[RPC-XXX]]] >>
[[/=]]

Pon los enlaces al artículo anterior y siguiente aquí ^

Ejemplo de cómo debería verse la navegación al final:

« RPC-001 | RPC-002 | RPC-003 »

Formatos de artículos alternativos

• Tono de Investigación
• Tono de Protección
• Tono de Contención
• Tono de Administración
• Tono ASF
• Protocol Laboratory Tone
• Research Paper Tone
• Tono ACI

Plantilla de Entrevista

> **Entrevistado:** [La persona, personas o RPC que se está entrevistando]
>
> **Entrevistador:** [Entrevistador, puede ser bloqueado usando █]
>
> **Prefacio:** [Pequeño pasaje que describe la entrevista.]
>
> **<Inicio del Registro, [opcional: información de tiempo]>**
>
> **Entrevistador:** [habla]
>
> **Persona:** [habla]
>
> [Repita según sea necesario]
>
> **<Fin del Registro, [opcional: información de tiempo]>**
>
> **Declaración de Cierre:** [Pequeño resumen y pasaje sobre lo que sucedió después.]

Símbolos de clasificación de Objetos

Al publicar un artículo, debe incluir un símbolo de clasificación de objetos. Para determinar qué clasificación cumple su artículo, consulta la Guía de Clasificación de Objetos. Aquí hay una lista de comandos que puede insertar fácilmente en la parte superior de su artículo para mostrar el símbolo adecuado, este aparece en orden de Nivel de amenaza:

Alfa

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-white.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-yellow.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-orange.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-red.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-purple.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/alpha-black.png]]

Beta

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-white.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-yellow.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-orange.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-red.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-purple.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/beta-black.png]]

Gamma

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-white.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-yellow.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-orange.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-red.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-purple.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/gamma-black.png]]

Omega

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-white.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-yellow.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-orange.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-red.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-purple.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/omega-black.png]]

+ Otras Clases

Neutralizado

[[f<image http://www.rpc-wiki.net/local--files/component:icons/neutralized.png]]

Theta

[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-white.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-yellow.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-orange.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-red.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-purple.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/theta-black.png]]

Épsilon

[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-white.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-yellow.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-orange.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-red.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-purple.png]]

[[f<image http://www.rpc-wiki.net/local--files/component:icons/epsilon-black.png]]

Estos códigos van debajo del módulo de clasificación.

Puede publicar un RPC haciendo clic en el enlace Serie I y seleccionando cualquier artículo de RPC vacío. Asegúrese de incluir la etiqueta "rpc" (sin comillas) en su página.

Formato del Sitio

Formato de Nomenclatura del Sitio

Los sitios son los lugares específicos en los que la Autoridad opera sus instalaciones. Cada sitio tiene asignado un número único de tres dígitos.

Ejemplo: Sitio-863

Los sitios creados en torno a una anomalía específica o una ubicación de interés se denominan "Sitios en el lugar" o Sitios OL. Si corresponde, estas instalaciones a menudo toman el número del RPC contenido, o el sitio principal más cercano en caso contrario.

Ejemplo: Sitio-OL-863

Las instalaciones menores que pueden ser impermanentes o construidas en condiciones anormales a menudo se denominan "Instalaciones". La mayoría de las veces, estas instalaciones son manejadas directamente por una gran instalación cercana; en este caso, se tratan como instalaciones satélite y se nombran en relación con su instalación principal. Otras Instalaciones pueden tomar el número de un RPC prominente contenido, o se les puede asignar un identificador aleatorio.

Ejemplo de instalación genérica: Instalación-863

Ejemplo de Instalación Satélite: Instalación-002-5

Las instalaciones privadas operadas por la Dirección Global o sus diversos departamentos extra-divisionales se denominan "Sitios Negros". Estas instalaciones se dejan fuera de los registros principales del Sitio y sus ubicaciones exactas se encuentran en estrictas bases de necesidad de conocer.

Ejemplo: Sitio Negro-863

Formato del Sitio

[[div class="site-doc" style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]

[[=image http://rpcauthority.wdfiles.com/local--files/site-index/site-header-white.png]]

[[=]]
[[size xx-large]]**NOMBRE DEL SITIO**[[/size]]
+ **BREVE DESCRIPCIÓN DEL SITIO**
[[/=]]

----
[[=]]
+ **Resumen**
[[/=]]
----

**Establecido:**

**Portada:**

**Localizacion:**

**Nombre Clave:**

**Código Hexadecimal:**

**Ocupación del Sitio:**

**División Jurisdicción:**

**Área Total:** ÁREA TOTAL DEL SITIO EN METROS CUADRADOS

**Instalaciones:** ÁREA INTERIOR TOTAL DEL SITIO EN METROS CUADRADOS [OPCIONAL]

**Tierra/Agua circundante:** ÁREA EXTERIOR TOTAL DEL SITIO [OPCIONAL]

**Información de Contexto:** BREVE DESCRIPCIÓN DE LA RAZÓN DE LA EXISTENCIA DEL SITIO

**Historia:** [OPCIONAL]

----

[[=]]
+ **Departamentos del Sitio** [OPCIONAL]
[[/=]]

----

LISTA DE DIVISIONES ORGANIZATIVAS/DEPARTAMENTOS ESPECIALIZADOS DENTRO DEL SITIO

----

[[=]]
+ **Sección Oficinas y Alas**
[[/=]]

----

LISTA DE ALAS FÍSICAS O COMPONENTES DEL SITIO

* **Nivel 1:**

* **Nivel 2:**

* **Nivel 3:**

----

[[=]]
+ **Administración del Sitio**
[[/=]]

----

LISTA DE LIDERAZGO DEL SITIO - (INCLUYA NOMBRES)

**Funcionarios Administrativos:**

* **Director del Sitio:**

----

RECUENTO NUMÉRICO DEL PERSONAL DEL SITIO

**Personal en el Sitio:**

* **Jefes de Departamento:**

* **Asistentes Administrativos:**

* **Personal Médico:**

* **Personal Investigador:**

* **Personal de Seguridad:**

* **Personal de Mantenimiento:**

* **Personal Clase CSD:**

**Total:**

----

[[=]]
+ **MST guarnecidos** [OPCIONAL]
[[/=]]

----

LISTE AQUÍ CUALQUIER MST GUARECIDO

----

[[=]]
+ **Anomalías Contenidas**
[[/=]]

----

LISTA ENLAZADA DE ARTÍCULOS RPC

----

[[=]]
+ **Anomalías Previamente Contenidas** [OPCIONAL]
[[/=]]

----

ENUMERE CUALQUIER ANOMALÍA PREVIAMENTE CONTENIDA AQUÍ

----

[[=]]
+ **Sub-Secciones** [OPCIONAL]
[[/=]]

----

LISTE CUALQUIER SUB-SECCIÓN AQUÍ

[[/div]]

Formato de Personal

[[include component:rate]]

[[div style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]

[[=image http://www.rpc-wiki.net/local--files/component:theme/AuthorityLogo2.png width="80px"]]

[[=]]
++ **>> Departamento de Personal y Gestión <<**
[[/=]]

----

CÓDIGO DE BLOQUE DE IMAGEN (SI ES APLICABLE)

**Nombre Completo:** NOMBRE DEL PERSONAL

**Número de Identificación/ID del personal:** XXX-XXX-XXXXXX

**Autorización de Seguridad:** Nivel X

**División:** Investigación/Protección/Contención/Administración/Ninguna

**Posición:** PUESTO DEL PERSONAL

**Rango:** RANGO DEL PERSONAL [Opcional]

**Sexo:** SEXO BIOLÓGICO DEL PERSONAL

**Altura:** XXXcm

**Peso:** XXkg

**Color de Piel:** COLOR DE PIEL [Opcional]

**Color de Pelo:** COLOR DE PELO [Opcional]

**Color de Ojos:** COLOR DE LOS OJOS [OPCIONAL]

**Lugar de Nacimiento:** LUGAR DE NACIMIENTO

**Fecha de Nacimiento:** DD Mes, AAAA

**Fecha de Alistamiento:** DD Mes, AAAA

**Historia de Educación:**
* Lista del historial de educación (AAAA-AAAA)
* Liste según sea necesario (AAAA-AAAA)

**Historia Ocupacional:**
* Lista de Empleos Anteriores (AAAA-AAAA)

----

[[=]]
+ Descripción General
[[/=]]

----

ESCRIBA LA VISIÓN GENERAL DEL PERSONAL AQUÍ

----

[[=]]
+ Más Información
[[/=]]

----

ESCRIBE CUALQUIER INFORMACIÓN ADICIONAL AQUÍ

[[/div]]

Formato de Objeto Menor

[[div class="content-panel"]]
**Designación:** LO-XXX
Coloque el bloque de imagen aquí si está incluyendo una imagen
**Descripción:** DESCRIPCIÓN FÍSICA BÁSICA DE LA ANOMALÍA
**Sitio de Ubicación:** DONDE SE ENCUENTRA ACTUALMENTE LA ANOMALÍA DENTRO DE LA AUTORIDAD
**Propiedades:** LAS PROPIEDADES ANÓMALAS DEL ARTÍCULO
[[/div]]

Formato de Ubicaciones Menores

[[div class="content-panel"]]
**Designación:** LA-XXX
**Ubicación:** UBICACIÓN DE LA ANOMALÍA
**Descripción:** DESCRIPCIÓN FÍSICA DE LA ANOMALÍA
**Propiedades:** DESCRIPCIÓN DE PROPIEDADES ANÓMALAS
**Uso:** USO POR AUTORIDAD SI ES APLICABLE
[[/div]]

Índice de Eventos Anómalos

[[div class="content-panel"]]
**Registro #:** XXX
**Localización:** UBICACIÓN DE LA ANOMALÍA
**Fecha de ocurrencia:** Mes DD, YYYY
**EDI involucrada:** LISTA DE ENTIDADES DE INTERÉS INVOLUCRADAS SI CORRESPONDE
**Observado por:** LISTE CUALQUIER PERSONA O VIDEO DE CÁMARA
**Descripción:** DESCRIPCIÓN DE LA ANOMALÍA
**Medidas Reaccionarias:** CUALQUIER MÉTODO DE CONTENCIÓN
[[/div]]

Formato de Operación

[[include component:rate]]

[[div style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]

= **Nombre de la Operación O-####**

**Fecha:** Mes DD, AAAA

**Objetivo:** Captura/Rescate/Investigacion/Recuperacion/etc.

**MST:** NOMBRE UN MST

**Miembros del Equipo:** X00-Cap, X00-1, X00-2

**Nota Preliminar:** Proporcione cualquier información introductoria necesaria aquí.

----

**[INICIO DEL REGISTRO]**

**X00-1:** Dialogo

//[evento.]//

**[FIN DEL REGISTRO]**

----

**Declaracion de Cierre:** Proporcione una declaración final y/o información de seguimiento. (Opcional)

[[/div]]

**Anexo/Apendice:** Registros de entrevistas/interrogatorios, materiales encontrados, declaraciones de testigos, etc. (Opcional)

Formato de perfil MST

[[include component:rate]]

[[div class="mst-profile" style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]

[[=image http://rpcauthority.wdfiles.com/local--files/foxtrot-4-prey/WhiteHeader.png]]

----

[[=]]
+ Descripción General
[[/=]]

----

[[f>URL]] (EMBLEMA MST OPCIONAL)

**Código Numérico:** DESIGNACIÓN MST

**Nombre Clave/Código:** NOMBRE EN CLAVE MST

**Lema:** [Opcional]

**Guarnición/HQ:** [Si es aplicable]

**Roles:** PROPÓSITO DE MST

**Establecido:** DATE THE MST IS FORMED

**Descripción:** WRITE DESCRIPTION OF THE TEAM HERE

----

[[=]]
+ Composición del Destacamento
[[/=]]

----

NÚMERO/ESTRUCTURA DE LOS MIEMBROS DEL EQUIPO ESPECIALIZADO IR AQUÍ

----

[[=]]
+ Personal Activo
[[/=]]

----

ENLACES A ARCHIVOS PERSONALES NOTABLES IR AQUÍ

----

[[=]]
+ Armamento
[[/=]]

----

EL EQUIPO DEL EQUIPO ESPECIALIZADO VA AQUÍ

----

[[=]]
+ Operaciones Completadas
[[/=]]

----

MISIONES DESTACADAS O ENLACES DE OPERACIONES VAYA AQUÍ

----

[[=]]
+ Asignaciones de Contención
[[/=]]

----

RPCs relacionados van aquí

[[/div]]

Formato de Metraje

[[include component:rate]]

[[div style="background: var(--background-4); border: var(--thick-border); padding: 1px 15px;"]]

**ID del Medio#:** M-XXXXX

> **Prefacio:** [Información sobre la fuente del video, formato, etc.]
>
> **<Inicio del Video>**
>
> **00:00 -** [Evento, repita según sea necesario.]
>
> **<Fin del Video>**

**Apéndice:** [Información Adicional, Sección Opcional]

[[/div]]

---

[básicos]

Wikidot Syntax

En su mayor parte, puede arreglárselas con solo conocer los conceptos básicos de la Sintaxis de Wikidot.

• Negrita: **texto de ejemplo** ⟶ texto de ejemplo
• Cursiva: //texto de ejemplo// ⟶ texto de ejemplo
• Subrayado: __texto de ejemplo__ ⟶ texto de ejemplo
• Tachado: --texto de ejemplo-- ⟶ texto de ejemplo

Como nota al margen, no necesariamente tiene que memorizarlos, ya que todos están disponibles en la barra de herramientas de Wikidot, pero aún así es útil saberlos.

---

Imagenes

Agregar imágenes es una excelente manera de mejorar su artículo.

[[include component:image-block name=Image_URL_Location|caption=Image_Caption]]

Esto crea un bloque de imagen que se expandirá cuando se desplace el mouse sobre él. Reemplace el texto en negrita con lo que corresponda.

También hay otras cosas que puede agregar para cambiar el funcionamiento de la imagen.

[[include component:image-block name=Image_URL_Location|caption=Image_Caption|width=###]]

Esto establecerá el tamaño de la imagen. El valor predeterminado es 300 píxeles. Asegúrate de poner una unidad para que funcione. "width=450px" hará que tenga 450 píxeles de ancho. "width=50%" hará que ocupe la mitad del ancho del contenido de la página.

[[include component:image-block name=Image_URL_Location|caption=Image_Caption|align=ALIGNMENT]]

Esto cambiará la forma en que se alinea la imagen. De forma predeterminada, la imagen se alineará al lado derecho de la pantalla. "align=left" hará que aparezca en el lado izquierdo. "align=center" hará que aparezca en el centro de la pantalla.

[[include component:image-block name=Image_URL_Location|caption=Image_Caption|enlarge=false]]

Esto hará que la imagen no se agrande cuando pase el mouse sobre ella. De forma predeterminada, el desplazamiento de ampliación está habilitado.

---

Si desea agregar imágenes normales (sin el formato de bloque de imagen), simplemente use:

[[image LINK]] ⟶ Crea una imagen normal.
[[<image LINK]] ⟶ Crea una imagen alineada a la izquierda.
[[>image LINK]] ⟶ Crea una imagen alineada a la derecha.
[[=image LINK]] ⟶ Crea una imagen centrada.
[[f<image LINK]] ⟶ Crea una imagen flotando a la izquierda. (Permite el ajuste de texto.)
[[f>image LINK]] ⟶ Crea una imagen flotando a la derecha. (Permite el ajuste de texto.)

Hay usos más avanzados de las imágenes sobre los que puede leer aquí.

---

Plegables

Los Plegables funcionan bien para ocultar grandes bloques de texto.

[[collapsible show="MOSTRAR TEXTO" hide="OCULTAR TEXTO"]]
TEXTO
[[/collapsible]]

MOSTRAR TEXTO

TEXTO

Además, puede usar el atributo hideLocation para cambiar dónde se cierra el plegable. Esto funciona bien con bloques de texto especialmente largos. Por ejemplo:

[[collapsible show="MOSTRAR BLOQUE LARGO DE TEXTO" hide="OCULTAR BLOQUE LARGO DE TEXTO" hideLocation="both"]]
BLOQUE LARGO DE TEXTO
[[/collapsible]]

MOSTRAR BLOQUE LARGO DE TEXTO

BLOQUE LARGO DE TEXTO

---

Hipervínculos

Puedes vincular a otras páginas utilizando el siguiente código:

[PAGE-URL LINK-TEXT]

Esto hará:

LINK-TEXT

Si la página a la que está enlazando está en el mismo sitio de Wikidot, simplemente puede usar /page-name. Por ejemplo:

[/formatting-guide LINK-TEXT]

Esto hará:

LINK-TEXT

La forma más sencilla de enlazar a páginas en el mismo sitio es la siguiente:

[[[guia-de-formato]]]

Esto hará:

guia-de-formato

---

Notas al Pie y Bloques de Notas al Pie

Puede agregar notas al pie usando el siguiente código:

Texto de ejemplo.[[footnote]]Explanation.[[/footnote]]

Texto de ejemplo.¹

Además, puede cambiar dónde se muestran las notas al pie en su página usando [[footnoteblock]]. Tenga en cuenta que solo puede haber un bloque de notas al pie por página.

Footnotes

1. Explicación.

---

Encabezados

Puede enfatizar el texto usando encabezados. El siguiente código:

+ Encabezado más Grande
++ Tamaño 2
+++ Tamaño 3
++++ Tamaño 4
+++++ Tamaño 5
++++++ Encabezado más Pequeño

Creará encabezados de varios tamaños:

Encabezado más Grande

Tamaño 2

Tamaño 3

Tamaño 4

Tamaño 5

Encabezado más Pequeño

---

Listas

Puede crear listas ordenadas (por número), así como listas desordenadas (viñetas). Agregar un espacio antes de un elemento de la lista aumentará su anidamiento.

# Elemento de Lista Ordenada 1
# Elemento de Lista Ordenada 2
# Elemento Anidado 1
# Elemento de Lista Ordenada 3
* Elemento de Lista Desordenado 1
* Elemento de Lista Desordenado 2
* Elemento Anidado 1
* Elemento de Lista Desordenado 3

Creará:

1. Elemento de Lista Ordenado 1
2. Elemento de Lista Ordenado 2
   1. Elemento Anidado 1
3. Elemento de Lista Ordenado 3

• Elemento de Lista Desordenado 1
• Elemento de Lista Desordenado 2
  • Elemento Anidado 1
• Elemento de Lista Desordenado 3

---

Tablas

Las tablas se pueden utilizar para organizar la información en su artículo:

||~ Título 1 ||~ Título 2 ||~ Título 3 ||
|| Ejemplo 1. || Ejemplo 2. || Ejemplo 3. ||

Esto hará:

Título 1	Título 2	Título 3
Ejemplo 1.	Ejemplo 2.	Ejemplo 3.

Puede expandir este modelo para tantas filas y columnas como necesite. Recuerde agregar una tilde (~) a cada cuadro en su fila de encabezado.

---

Bloques de Citas

Los bloques de cotizaciones son excelentes para probar registros, registros de exploración, etc. Agregar un bloque de comillas es tan simple como agregar ">" antes de cada línea de su texto. Entonces:

> Línea 1
>
> Línea 2

Creará:

Línea 1

Línea 2

Tenga en cuenta que las líneas vacías también requieren ">"; de lo contrario, su bloque de comillas se dividirá. Además, el espacio después de ">" es esencial; el código no funcionará de otra manera.

---

Anclas

Los anclajes pueden hacer que navegar por tu página sea mucho más fácil:

[[# anchorname]] Para crear un ancla.
[#anchorname Link text.] Para volver al ancla.

Esto creará:

Link text.

---

Divisores Horizontales

Los divisores horizontales se utilizan para dividir el contenido de una página:

Texto
-----
Mas texto

Esto creará:

Texto

---

Mas texto

---

Alinear Texto

Puede alinear el texto a la izquierda, al centro y a la derecha de la página, así como justificarlo:

[[<]]
Texto alineado a la izquierda

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/<]]

[[=]]
Texto centrado

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/=]]

[[>]]
Texto alineado a la derecha

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/>]]

[[==]]
Texto justificado

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[[/==]]

Creará:

Texto alineado a la izquierda

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Texto centrado

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Texto alineado a la derecha

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Texto justificado

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Justificar el texto hace que todas las líneas estén espaciadas uniformemente, por lo que solo es visible en párrafos grandes.

---

Texto Coloreado

El texto en color es muy simple de hacer:

##blue|Blue texto.##

Hace: Blue texto.

También funciona con valores hexadecimales:

##71e02c|Green texto.##

Hace: Green texto.

---

Pestañas

Las pestañas se pueden usar para organizar las páginas y evitar que se abarrote la zona de pruebas. Aquí está cómo hacerlos:

[[tabview]]
[[tab Pestaña Uno]]
Texto de ejemplo.
[[/tab]]
[[tab Pestaña Dos]]
Más texto de ejemplo.
[[/tab]]
[[/tabview]]

Hace:

Pestaña Uno

Texto de ejemplo.

Pestaña Dos

Más texto de ejemplo.

Puede agregar tantos [[tab]] como necesite.

Crear múltiples [[tabview]] … [[/tabview]] elementos creará múltiples bloques de pestañas. Por ejemplo:

[[tabview]]
[[tab Uno]]
[[/tab]]
[[/tabview]]
[[tabview]]
[[tab Dos]]
[[/tab]]
[[/tabview]]

Will create:

Uno

Dos

---

Líneas Vacías

Debido a la forma en que Wikidot formatea el texto, normalmente es imposible tener líneas vacías. Sin embargo, puede omitir esto mediante el uso de etiquetas sin análisis. Normalmente, hacer líneas vacías se mostraría de la siguiente manera:

Texto



Mas texto

Texto

Mas texto

Sin embargo, al usar etiquetas sin análisis, puede hacer que se muestren correctamente:

Texto
@@@@
@@@@
@@@@
Mas texto

Texto



Mas texto

Estas etiquetas también se pueden usar para mostrar código sin analizarlo. Por ejemplo:

@@ [[div class="ejemplo"]] @@

@@ [[/div]] @@

[[div class="ejemplo"]]

[[/div]]

---

CSS Básico

CSS es un lenguaje utilizado para aplicar estilo a ciertos elementos en una página web. Se puede utilizar para mejorar en gran medida la apariencia de sus artículos. Primero, cubriremos algunos conceptos básicos de cómo funciona la sintaxis de Wikidot junto con CSS.

---

Elementos de División

En HTML, los elementos div se utilizan para marcar secciones específicas de una página.

Aunque la sintaxis de Wikidot es un poco diferente de HTML, aún puede crear elementos div de la siguiente manera:

[[div]] Contenido. [[/div]]

Por supuesto, esto no hará nada por sí mismo.

Clases e Identificaciones

Puede asignar una clase o ID a su elemento div agregando lo siguiente:

[[div class="firstDiv"]] Contenido. [[/div]]

[[div id="secondDiv"]] Contenido. [[/div]]

Esencialmente, esto le da al navegador una forma de identificar los divs. Más tarde, podemos usar estas clases/ID para aplicarles estilo.

El estilo de los ID tiene prioridad sobre el estilo de las clases. Debe usar ID solo una vez, para elementos específicos, mientras que las clases se pueden reutilizar una y otra vez para aplicar el mismo estilo a varios elementos.

---

Sintaxis CSS

Antes de continuar, veamos la sintaxis básica de CSS. El estilo se aplica a través de conjuntos de reglas, que consisten en un selector y un bloque de declaración. He aquí un ejemplo de un conjunto de reglas:

.firstDiv {
background-color: black;
border: 1px solid white;
border-radius: 4px;
}

Aquí, ".firstDiv" es el selector y la sección en el medio es el bloque de declaración. Los bloques de declaración deben estar encerrados entre llaves ({}), y cada declaración debe terminar en un punto y coma. El espaciado y la sangría no son necesarios, aunque hacen que la hoja de estilo sea mucho más legible. Si lo desea, puede tener un conjunto de reglas en una sola línea:

.firstDiv {background-color: black; border: 1px solid white; border-radius: 4px;}

Selectores

Hay tres tipos principales de selectores:

• Selectores de Elementos
• Selectores de Clase
• Selectores de identificación

Estos son algunos ejemplos de los diferentes tipos:

h1 {…}
.classDiv {…}
#idDiv {…}

El primer conjunto de reglas se aplicaría a todos los elementos h1 (título 1) de la página. El segundo se aplicaría a todos los elementos con la clase "classDiv". El tercero se aplicaría a todos los elementos con el ID "idDiv". Recuerde: los selectores de clase comienzan con puntos, los selectores de ID comienzan con hashes.

Existe otro tipo de selector conocido como selector universal, que se utiliza para seleccionar todos los elementos de una página, aunque por lo general no es necesario utilizarlo.

* {…}

Propiedades

Hay una cosa más que tenemos que repasar: Propiedades. Hay cientos de propiedades en CSS, pero no se preocupe, no tendrá que usar la mayoría de ellas. Aquí hay una breve lista de las propiedades más comunes que usará:

• color: Cambia el color del texto en el elemento seleccionado.
  • Valores: código hexadecimal (#000000), rgb (rgb(0, 0, 0)), etc.

• background-color: Cambia el color del fondo del elemento.
  • Valores: código hexadecimal, rgb, etc.

• background-image: Aplica una imagen de fondo al elemento seleccionado.
  • Valores: url('IMAGEURL'), linear-gradient(…)

• border: Modifica el borde del elemento.
  • Valores: (size [1px, etc.]), (style [solid, dashed, dotted, etc.]), (color [hex, rgb, etc.])

• border-radius: Redondea las esquinas del borde de un elemento.
  • Valores: píxeles, porcentaje, etc.

• margin: Cambia el espacio entre un elemento y su contenedor (el elemento que está dentro).
  • Valores: píxeles, porcentaje, etc.
    • Los lados se pueden diseñar de forma independiente utilizando margin-top, margin-bottom, etc.
    • Al diseñar los 4 lados usando un atributo, el espaciado se aplica en el sentido de las agujas del reloj comenzando desde la parte superior; por lo que "1px 2px 3px 4px" aplicará un margen de 1px en la parte superior, 2px a la derecha, 3px en la parte inferior y 4px a la izquierda.

• padding: Cambia el espacio entre el borde de un elemento y su contenido.
  • Valores: píxeles, porcentaje, etc..
    • Similar a los márgenes, el espaciado se aplica en el sentido de las agujas del reloj desde la parte superior. Los lados se pueden diseñar individualmente usando padding-top, padding-bottom, etc.

• font-family: Cambia la fuente del texto en el elemento seleccionado.
  • Valores: nombres de fuentes
    • Puede agregar varias fuentes aquí (familia de fuentes: Arial, Tahoma, sans-serif;) Si una fuente no está disponible por cualquier motivo, el navegador intentará usar la siguiente.

• font-size: Cambia el tamaño del texto en el elemento seleccionado.
  • Valores: [8px, etc.], [1em, etc.], smaller, larger, [percentages]
    • 'em' y escala de porcentaje basada en el tamaño de fuente actual del documento. 1em = 100%.

• font-weight: Cambia el peso (grosor) del texto en el elemento seleccionado.
  • Valores: normal, bold, lighter, bolder, [100, 200, etc.]
    • Dependiendo de su fuente, es posible que no todos los valores estén disponibles.

Tenga en cuenta que esto es solo un pequeño puñado de propiedades: w3schools es una excelente referencia si desea obtener más información.

---

Elementos de Estilo

Bien, ahora sabemos todo sobre la sintaxis CSS. ¿Cómo diseñamos nuestro div? Hay tres métodos para hacerlo:

• Estilo en línea
• Usando un módulo CSS
• Importación de una hoja de estilo

Por ahora, solo cubriremos los dos primeros.

Estilo en línea

El estilo en línea es el método más simple, aunque menos eficiente, para diseñar elementos. Realmente solo debería usarlo cuando tenga que diseñar un elemento específico; de lo contrario, es mucho más eficiente usar un módulo CSS. Para aplicar un estilo en línea a un elemento, agréguele el atributo de estilo:

[[div style=" "]] Contenido. [[/div]]

Puede pegar un bloque de declaración dentro del atributo de estilo y se aplicará al div. Por ejemplo:

[[div style="background-color: rgb(0,0,0); color: white;"]] Contenido. [[/div]]

Esto creará:

Contenido.

Tenga en cuenta que no se necesitan selectores ni llaves cuando se usa el estilo en línea, aunque aún debe incluir un punto y coma al final de cada declaración.

Módulo CSS

Una forma más eficiente de diseñar elementos es mediante el uso de un módulo CSS. Su análogo en HTML sería una etiqueta <style>. Para agregar un módulo CSS, colócalo en la parte superior de tu documento:

[[module CSS]]

[[/module]]

Puede colocar conjuntos de reglas CSS dentro de este módulo y se aplicarán a todo el artículo. Por ejemplo:

[[module CSS]]
.exampleRuleSet {
background-color: rgb(0,0,0);
color: white;
}
[[/module]]

---

Ejemplos

Hay muchas situaciones en las que el uso de CSS puede resultar útil.

Escenario A

Digamos que desea crear un bloque div que se parece a una terminal de computadora. El fondo tendría que ser negro, con texto en blanco. Una fuente monoespaciada también sería buena. ¡Traduzcamos esto a CSS!

[[div style="background-color: black; color: white; font-family: monospace; font-size: 16px; padding: 2%; border-radius: 5px"]]
| TEXTO
| MAS TEXTO
[[/div]]

Esto crea:

| TEXTO
| MAS TEXTO

Analicemos lo que está sucediendo:

• "background-color: black" establece el fondo en negro.
• "color: white" establece el color del texto en blanco.
• "font-family: monospace" Establece la fuente en monoespacio, similar a un terminal de computadora.
• "padding: 2%" agrega un poco de espacio entre el texto y el borde del bloque div.
• "border-radius: 5px" redondea las esquinas del div por 5px.

Otra forma de hacer esto sería:

[[module CSS]]
.terminal {
background-color: black;
color: white;
font-family: monospace;
padding: 2%;
border-radius: 5px;
}
[[/module]]

…

[[div class="terminal"]]
| TEXTO
| MAS TEXTO
[[/div]]

Esto produciría el mismo resultado, con el beneficio adicional de ser fácilmente reutilizable con múltiples divs. Simplemente asigne a cada div la clase "terminal" y estará listo para comenzar.

---

Temas Personalizados

Si desea agregar un tema personalizado a una página, puede crear uno usted mismo usando CSS o navegar a través de los temas ya disponibles aquí.

Una guía sobre cómo crear sus propios temas debería estar disponible en un futuro próximo. Oh, me vengo!