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

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

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]]

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.


[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]]

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]]


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.1

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.


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:

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:


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!

Si no se indica lo contrario, el contenido de esta página se ofrece bajo Creative Commons Attribution-ShareAlike 3.0 License