El Formato Avanzado y Tú
Puntuación: +2+x

El Formato Avanzado y Tú

Bienvenidos y saludos. ¡Si estás leyendo esta página, probablemente estés aquí para aprender a realizar cosas de fantasía con código Wikidot!

Este ensayo está pensado para cualquier persona que quiera ir más allá de las básicas negritas, cursivas y colapsables. Voy a hacer un repaso también, sin embargo, la mayor parte de esta guía está destinado a ser utilizada para el diseño avanzado de artículos.

Algunos ejemplos que puedes realizar con las cosas cubiertas en esta guía se encuentran en varios de mis SCPs, como SCP-3872 y SCP-027-J

Si tiene alguna pregunta sobre las secciones de esta guía, ¡por favor, envíame un MP por Wikidot!


Sección 1: Trucos Básicos de Formato Wikidot


Algunos de los códigos básicos de wikidot en sí es un poco complicados, y no necesariamente se explica perfectamente. Estas son las dos partes sobre las cuales más me preguntan:

Bloque de Citas


Pestañas

Hey, hey Magnus, esta página de aquí tiene este pedacito de formato realmente impresionante y quiero usarlo. ¡Enséñame cómo!

Bueno, ciudadano aleatorio, es más fácil de lo que piensas. En la esquina inferior derecha de cada página del sitio principal, aparece "Opciones". Clickeelo. Una pequeña lista aparece. Haga clic en "Ver Código de Página" y le mostrará el código Wikidot que generó esa página. Cada pedacito de ella.

Esto te permitirá ver lo que quieras encontrar en la wiki, si no sabes cómo hacer algo.


Sección 2: Usando código no-Wikidot


Aquí es donde comienza a ser interesante. Wikidot tiene soporte para todo tipo de objetos. No sólo tiene su propio lenguaje de marcado, también puede incluir divs personalizados.

Código:
[[div id="myDiv" style="background-color: green; text-color:white;"]]
¡Esto es un div!
[[/div]]
Resultado:

¡Esto es un div!

Los divs son contenedores web estándar que definen una cosa que contiene otras cosas. Esas cosas pueden ser texto, otros divs, extensiones u otros objetos web. Puedes diseñarlas literalmente como quieras, usando propiedades.

Generalmente esto se hace a través de lo que se llama CSS, u hojas de estilo en cascada1. Estos anularán el formato estándar de wikidot, lo cual es como mi colapsable de arriba que luce ligeramente diferente a los otros a los que probablemente estés acostumbrado.

Usar Divs te permite crear cajas y varias otras figuras para adaptarse a las necesidades de tu artículo.

Por ejemplo, si desea que algo se vea como una conversación de mensajes de texto:

Código:
[[div id="myTextMessageConvoHolder" style="display:inline-block; width:100%;"]]
[[div id="myTextMessageConvoDiv" style="color:white; border-radius: 25px; background: #73AD21;padding: 15px;width: 150px; height: 100px;float:left;"]]
Me gustan los traseros grandes, y no puedo mentir.
[[/div]]
[[html]]
<br/>
[[/html]]
[[div id="myTextMessageConvoDivReply" style="color:white; border-radius: 25px; background: #blue;padding: 15px;width: 150px; height: 100px;float:right;display: inline-block"]]
Mis otros compañeros no pueden negarlo.
[[/div]]
[[/div]]
Resultado:

Me gustan los traseros grandes, y no puedo mentir.

Mis otros compañeros no pueden negarlo.


Como puedes ver, hay muchas cosas para las que puedes usar esto. También puede ver, tengo otra sección de código no-estándar de wikidot: un bloque HTML.

Si sabes como escribir en HTML, debes de incluirlo dentro de un bloque [[html]] [[/html]], e incluye lo que quieras, incluyendo HTML y javascript dentro de etiquetas <script>.

Esto le permite introducir algunos componentes realmente impresionantes. Uno de los componentes que me preguntan con frecuencia acerca de cómo hacer son los dobles colapsables.

Estos no son demasiado difíciles de hacer. La parte importante es notar, que cada nivel tiene un espacio más antes del asterisco que el nivel anterior.

Código:
[[div class="foldable-list-container"]]
* Colapsable lol
* segundo
* Más
* aún más
* Prueba
[[/div]]
Resultado:

  • Colapsable lol
    • segundo
  • Más
    • aún más
      • Prueba

También puedes diseñar el div foldable-list-container, pero cambiando su módulo CSS para incluir elementos dentro del div. Vea las secciones 3 y 4 para entender cómo hacerlo.

La última pieza de código no-Wikidot que se incluye en algunas de las páginas más administrativas, son iframes.

Los iframes se utilizan para incluir el texto completo de otro sitio web en la página actual. Un ejemplo es el siguiente:

Código:
[[iframe http://home.helenbot.com/tools/randomButton.php style="border: 1px black solid;" width="100%" height="25" scrolling="no"]]
Resultado:


Esta es una página de mi sitio web, donde albergo una gran cantidad de proyectos técnicos, que es un botón aleatorio para un SCP. Esto toma la página web literal, la extrae y luego la muestra en un div más pequeño aquí en la página actual. Así es como muchas de las imágenes más "Avanzadas" se crean para artículos como SCP-895 y SCP-027-J

El bloque de imagen para SCP-027-J, por ejemplo, se genera con lo siguiente:

Código:
[[div class="scp-image-block" style="width:200px; float: right;"]]
[[iframe http://home.helenbot.com/images/remote.html width="200px" height="200px" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:200px;"]]
SCP-027-J?
[[/div]]
[[/div]]
Resultado:

SCP-027-J?


Sección 3: Divs y cómo estilizarlos

Así que has visto divs, y algunos trozos donde dice "Style". Estas son configuraciones de CSS codificadas, las cuales puedes definir en función a cada objeto si lo deseas. O puedes incluir tus propias configuraciones personalizadas de CSS.

Este es el módulo CSS de la página que estas viendo en este instante:

[[module css]]
#page-content .collapsible-block {
max-width: 100%;
background-color: #afe0ff;
text-color: black;
border-color: #b01;
border: solid 1px #b01;
padding: 5px;
}
.collapsible-block-content p {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
}
.collapsible-block-content{
text-align: left;
}

.collapsible-block-folded, .collapsible-block-unfolded{
text-align: center;
text-color: black;
}
[[/module]]


Lo que esto hace específicamente, es anular la configuración CSS de los bloques de colapsables, como se puede ver en las secciones plegables.

Los Módulos CSS te permiten hacer casi cualquier cosa con una página. Incluso puedes cambiar los colores de los contenedores padre. Puede cambiar el color de las propias páginas, que se utiliza ampliamente en los hubs de GdI, como en el Hub del Canon Tercera Ley. También puede almacenar tu CSS en otra página e importarla, como se puede ver en el hub del canon.

Es importante tener en cuenta que cualquier atributo aplicado a un contenedor "padre" también se aplica a sus hijos a menos que sea anulado por un atributo secundario. Si centras el texto de un div, todo el texto contenido en cualquier div dentro de ese div estará centrado, a menos que lo sobrescribas dentro del div "hijo."

Esto no pretende ser un tutorial de CSS, pero los conceptos básicos son:


Sección 4: Manipulando una página por diversión y beneficios

La última sección es la gran pregunta: si tienes algo que quieres arreglar, ¿cómo demonios puedo saber qué cambiar?

Esto no se supone que sea un tutorial en desarrollo web, por lo que este va a ser un poco ralo, pero voy a darles un curso intensivo en cómo cambiar las propiedades del elemento.

Si pasas el ratón sobre una cosa (literalmente, cualquier parte de una página web) y haces clic derecho. Debería haber una opción que diga "Inspeccionar Elemento" (o simplemente Inspeccionar). Esto abrirá una vista, que se parece un poco a un panel de control gigante.

Si pasas el cursor sobre el "mensaje de texto" azul de la sección 2, e inspeccionas el elemento, obtendrás las siguientes propiedades:

element.style {
color: white;
border-radius: 25px;
background: blue;
padding: 15px;
width: 150px;
height: 100px;
float: right;
display: inline-block;
}

Puedes hacer clic a la derecha de estas propiedades y modificar cualquiera de los atributos, o hacer clic debajo o encima de ellas y agregar un atributo. La mejor forma de averiguarlo es simplemente experimentar. Si todo lo demás falla, googlee el atributo que desea, o una descripción general de la cosa que desea hacer, seguido de "CSS".

Intente modificar la propiedad "background: blue;" a un color diferente. Esto sólo afecta la forma en como TU veas la página, y no afectará la vista de la página a nadie.


Sección 5: Listado de Páginas

Muy bien, este se siente un poco como el gran papá. Los Listpages (O Listado de Páginas) son un módulo que proporciona wikidot, que te permite buscar en la wiki por criterios y mostrar los resultados. La aplicación más fácil de esto es:

Código:
[[module ListPages created_by="andres2055" limit="5" separate="no"]]
%%title_linked%% - %%rating%% Creado el: %%created_at%%
[[/module]]
Resultado:

Esto es una selección simple de páginas hechas por mi, andres20552, limitado a 5 de ellos, sin agregar un salto de línea. En el "cuerpo" del módulo, proporcionas lo que desea mostrar. Aquí, estoy mostrando el título, el puntaje y la fecha de creación.

Los Listpages ralentizaran considerablemente su página, si tienes muchos de ellos, y más de uno realmente no se recomienda por página.

A continuación se muestra un pequeño número de criterios y cosas seleccionables:


Sección 5: El Buen Material

¿Conoces el desarrollo web? Alardea de ello.


Conclusión

Espero que esto le haya proveído de por lo menos un vistazo a cómo hacer algunas de las aplicaciones más avanzadas de trabajo en código Wikidot. Si tiene alguna pregunta no dude en enviarme un MP3.

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