Manual
Cara el modo de uso de esta tecnología contamos que parte de la idea de ser implementado en entornos Web, por lo que es totalmente compatible con HTML, es decir, que a parte de las propias funcionalidades del HTML que se le puedan dar de forma nativa, éste contará con otros elementos específicos del mismo basado en tecnologías como MarkDown o el lenguaje de marcas utilizado para el proyecto MediaWiki.
El resultado del proceso del WMarkDown, inicialmente será completamente HTML por lo que puede ser alterado mediante JavaScript, ECMAScript, SASS y CSS para personalizarlo al usuario.
A continuación iremos detallando las diferentes marcas para dar lugar a cada uno de los elementos.
Párrafos
Para poder crear párrafos, simplemente hemos de crear textos separados por doble salto de línea al menos. Un único salto entre líneas se considerará parte del mismo párrafo.
- typewmd-examples
- characters121
- lines6
Esto es un párrafo. Esto es otro párrafo. Esto sigue siendo parte de éste segundo párrafo. Este es un tercer párrafo.
Formatos de texto
Los formatos de texto en WMarkDown se pueden generar de una forma muy básica a partir de marcas. Los más habituales son los que se representan en el siguiente ejemplo:
- typewmd-examples
- characters833
- lines18
- *Esto es un texto en cursiva.* - **Esto es un texto en negrilla.** - ~~Esto es un texto tachado.~~ - __Esto es un texto subrayado.__ - ``Esto es un bloque de código o texto monospaciado como tal.`` - ***Esto es un texto negrilla y cursiva.*** - ~~*Esto es un texto tachado y en cursiva.*~~ - ~~**Esto es un texto tachado y en negrilla.**~~ - ~~***Esto es un texto tachado, en negrilla y cursva.***~~ - __*Esto es un texto subrayado y en cursiva.*__ - __**Esto es un texto subrayado y en negrilla.**__ - __***Esto es un texto subrayado, en negrilla y cursva.***__ - __***Esto es un texto subrayado, en negrilla y cursiva.***__ - __~~*Esto es un texto subrayado, tachado y en cursiva.*~~__ - __~~**Esto es un texto subrayado, tachado y en negrilla.**~~__ - __~~***Esto es un texto subrayado, tachado, en negrilla y cursva.***~~__
Todas estas marcas se pueden entremezclar, pero es muy importante tener encuenta que las aperturas y los cierres de estos elementos han de corresponder de dentro a fuera siempre. Si se abre, por ejemplo, una cursiva y luego una negrilla, y se cierra primero negrilla y luego cursiva, el resultado no será el esperado, siendo ejecutado sólo el primero de la lista y pudiendo ser afectado tras éste en el resto del documento.
Como resumen o conclusión final tenemos los siguientes formatos:
- *: Cursiva mediante un único asterisco.
- **: Negrilla mediante doble asterisco.
- ˜˜: Texto tachado mediante doble virgulilla.
- __: Texto subrayado mediante doble guión bajo.
- ``: Texto monoespaciado o para código mediante doble comilla o acento agudo.
Ticks, Checks y Radios
Los Ticks, Checkboxes y los Radio Buttons son elementos bastante básicos con los que trabajar en un apartado documental pues pueden ser indicativos de selección o marcas que determinan elementos seleccionados. A continuación se deja una tabla con las marcas y valor que representan.
Marca | ||
---|---|---|
Upper | Lower | Valor |
[ ] | [ ] | |
[X] | [x] | |
[-] | [-] | |
( ) | ( ) | |
(X) | (x) | |
(-) | (-) | |
{V} | {v} | |
{W} | {w} | |
{X} | {x} | |
Upper | Lower | Valor |
Marca |
Estas marcas no están condicionadas entre sí como puede ser cuando se trabajan en formularios los Radio Buttons, lo que significa que son de libre uso.
Estas marcas ignoran si son en mayúsculas o minúsculas, es decir, que funcionarán independientemente de cómo se escriban.
Títulos
Los títulos en WMarkDown no sólo son un formato, sino también una referencia dentro de página. Es muy importante su buen uso dentro del documento para evitar no sólo conflictos con los estándares, sino también dentro del propio WMarkDown. Los títulos serían los siguientes:
- typewmd-examples
- characters121
- lines10
## Esto sería un H2. ### Esto sería un H3. #### Esto sería un H4. ##### Esto sería un H5. ###### Esto sería un H6.
Hay que tener en cuenta que el WMarkDown permite incluir contenido entre distintos ficheros, y éstos pueden ir gestionados con títulos. Éstos no cambiarán tras la carga por lo que si se adjunta un archivo con títulos a la altura o superiores al actual pueden romper la dinámica del documento resultante.
También es importante destacar que el tamaño de los títulos va porcentuado al texto actual según formato del WMarkDown.
También es importante mencionar que no hay títulos por encima de H6, y se desaconseja, por estándar de HTML, el uso de H1, salvo de forma manual en la cabecera de la Web para representar el logo y/o nombre del sitio o documento.
Como alternativa para seguir los estándares de MarkDown y MediaWiki, tenemos la opción de hacer los títulos de la siguiente manera:
- typewmd-examples
- characters141
- lines10
== Esto sería un H2 == === Esto sería un H3 === ==== Esto sería un H4 ==== ===== Esto sería un H5 ===== ====== Esto sería un H6 ======
Existe una alternativa en MarkDown oficial que sería para los H1 y los H2 con respecto a subrayar una línea con caracteres de igual ("=") para los H1; y con guines medios ("-") para los H2. Al trabajar H1 y H2, pese a poderlos adaptar a H2 y H3 por la filosofía de trabajo de WMarkDown, éstos no se implementaron, tanto por la complejidad a la hora de ser interpretados como por el poco uso que se vio tras un análisis inicial.
Links o enlaces
Para identificar o marcar un Link o enlace en WMarkDown, tenemos varias opciones según nos convenga en su momento, ya sea por comodidad o necesidad. En nuestro caso tenemos los estándares de MarkDown y MediaWiki, así como un sistema propio y detección automática de enlaces mediante búsqueda de protocolos de red con su división al Path, URL o código que lo sigan "://", de esta forma podemos identificar protocolos como:
- FILE.
- HTTP y HTTPS.
- FTP y FTPS.
- SFTP, SSH, etc.
- Etcétera.
Así pues, contando con los distintos métodos que tenemos para generar Links nos encontramos con los siguientes modos.
Para poder ignorar un Link el cual no se quiere que aparezca o que posiblemente se haga uso de un texto el cual no sea un Link hemos de usar las marcas para ignorar el formato de fragmentos de texto que se relata en el Módulo de Exclusión o "Ignore". También se puede hacer uso de los escapes o de código Ampersand para impedir que dichos contenidos se vean afectados.
Es importante mencionar que los Links, teóricamente no deben de contener espacios, motivo por el cual, si éstos poseen espacios, como pueden ser los casos de los números de teléfono, en el propio enlace éstos se compactarán, aunque se mostrará íntegramente como se hallan escrito por el usuario.
Link directo
Al escribir un Link identificable mediante protocolo o por si es un elemento como una dirección E-Mail, éste puede ser escrito de forma directa.
- typewmd-examples
- characters168
- lines5
Aquí te pongo un Link directo: https://wmarkdown.k3y.pw/ También se puede hacer un Link directo de una dirección de E-Mail tal como [email protected]
Es importante destacar que este modo de trabajo no permite definirle un texto directo al enlace quedando únicamente el propio texto del enlace como texto tanto de título como de muestreo.
¡OJO!En este caso, por ejemplo, en un párrafo el cual acabe en un signo como el punto o la coma, si éste va pegado al Link éste lo entenderá como parte del mismo.
Link MediaWiki
El Link de MediaWiki se integra a partir de apertura y cierre de corchetes de forma directa, y todo lo que se comprenda ahí dentro se entenderá como Link. También hay que destacar que si hay un espacio éste se entenderá como separador del texto que se quiere que represente el Link. Este modo también distingue ciertos protocolos como el de los teléfonos.
- typewmd-examples
- characters595
- lines11
Web de [https://wmarkdown.k3y.pw/]. Para ver más información, por favor, presione [https://wmarkdown.k3y.pw/ aquí]. Esto es un número de teléfono [+65 9127 92 35 533] y este es otro [723 564 123] y este el mismo de antes pero más obfuscado [723564123]. Y esto es una dirección E-Mail [[email protected]]. También puedes poner direcciones como Cryptomonedas como [bitcoin:tb1qujswuek3mefsm3m84g94ek40drysxe9z09yfnc tb1qujswuek3mefsm3m84g94ek40drysxe9z09yfnc] o [litecoin:tltc1q4xy8sg2hf6nqqrhp69aukn6md3rx8v6jlqc67s tltc1q4xy8sg2hf6nqqrhp69aukn6md3rx8v6jlqc67s] entre otras.
Link MarkDown
El Link MarkDown es el Link más complejo. Por su versatilidad fue integrado pero por la complejidad hubo dudas a la hora de integrarlo. Éste se basa en un bloque opcional comprendido entre corchetes que contempla el texto que se quiere que aparezca; luego el Link entre paréntesis el cual, dentro del paréntesis puede ir acompañado de tras un espacio o tabulación, de forma opcional, ya sea entre comillas simples dobles o nada, un texto que sea el título que se presente con el puntero.
- typewmd-examples
- characters763
- lines11
Web de (https://wmarkdown.k3y.pw/). Para ver más información, por favor, presione [aquí](https://wmarkdown.k3y.pw/ Link a WMarkDown.). Esto es un número de teléfono [+65 9127 92 35 533](tel:+6591279235533 Un teléfono inventado xD) y este es otro [723 564 123](723 564 123 También admite espacios.) y este el mismo de antes pero más obfuscado [723564123](723564123). Y esto es una dirección E-Mail [[email protected]]. También puedes poner direcciones como Cryptomonedas como [tb1qujswuek3mefsm3m84g94ek40drysxe9z09yfnc](bitcoin:tb1qujswuek3mefsm3m84g94ek40drysxe9z09yfnc Dirección Bitcoin TestNet) o [tltc1q4xy8sg2hf6nqqrhp69aukn6md3rx8v6jlqc67s](litecoin:tltc1q4xy8sg2hf6nqqrhp69aukn6md3rx8v6jlqc67s Dirección Litecoin TestNet) entre otras.
Muestra de color
Las muestras de color no son más que unas cajitas para mostrar un color concreto de una forma rápida y ágil.
- typewmd-examples
- characters278
- lines13
Esta muestra [[#F00]] es el color rojo. Esta muestra [[#FF0000]] es el color rojo. Esta muestra [[#f00]] es el color rojo. Esta muestra [[color rgb(255, 0, 0)]] es el color rojo. Esta muestra [[color red]] es el color rojo. Esta muestra [[color #F00]] es el color rojo.
Es cierto que tenemos la capacidad de poner bloques de color vía HTML, ya sea con la etiqueta SPAN o DIV, pero esta forma es más eficiente y permite que sin tener conocimientos de HTML poder aplicar colores sólo a su nombre en inglés, código hexadecimal o RGB y RGBA.
Las muestras de color se pueden poner simplemente entre dobles corchetes si éstas son hexadecimal; o bien, entre corchetes se nombra "color" y luego, separado por espacio o tabulación, el código de color, independientemente de ser hexadecima, RGB, RGBA, HLS o HLSA; así como con el nombre del color en inglés.
Tablas
Las tablas en WMarkDown no siguen ningún estandar concreto pues desde WMarkDown las consideramos altamente ineficientes, muy posiblemente por desconocimiento pero hemos hecho algunos cambios que tiran más hacia MediaWiki que a Markdown, aun así, el parecido y la funcionalidad son similares.
Teniendo en cuenta que tanto a nivel de texto plano sobre WMarkDown como a nivel gráfico proceso han de ser altamente visibles, así cmo simplificar en la medida de lo posible la composición de una de éstas, se hizo de la siguiente forma.
- typewmd-examples
- characters371
- lines12
A continuación montaremos una tabla. [| class="jojo" |^ Cabecera 1 | Cabecera 2 | Cabecera 3 | Cabecera N |= Título 1 | Título 2 | Título 3 | Título N | Elemento 1 | Elemento 2 | Elemento 3 | Elemento N | Elemento 1 | Elemento 2 | Elemento 3 | Elemento N | Elemento 1 | Elemento 2 | Elemento 3 | Elemento N |_ Pie 1 | Pie 2 | Pie 3 | Pie N |]
Como podemos observar, las tablas se abren mediante corchete y exclamación, donde la primera línea nos permite poner atributos a la misma, pero a nivel de la etiqueta TABLE en HTML. Por otro lado, tenemos los títulos, que se hacen a partir de acento circunflejo ("^") para indicar que será para la cabecera; el guión bajo ("_") para indicar que es para el pie de página; y el igual ("=") que indica que es para ambos. Las cabecerás se irán creando verticalmente según aparezcan en la tabla y no tienen que ir en ninguna posición específica.
Por otro lado, decir que se puede hacer Span de las columnas, es decir, unir dos o más columnas de una forma visual y sencilla. Para ello se unirán tuberías, caracter que divide cada columna. Si no hay espacios ni nada que las separe, éstas se unirán en una única celda en esa tupla concreta.
- typewmd-examples
- characters331
- lines9
[| |= Columna 1 | Columna 2 | Columna 3 | Columna 4 | Columna 5 | Columna 1 | Columna 2 | Columna 3 | Columna 4 | Columna 5 ||| Columna 1-3 | Columna 4 | Columna 5 | Columna 1 | *Columna* 2 ||| Columna 3-5 | Columna 1 || Columna 2-3 | [https://wmarkdown.k3y.pw/#tablas Columna 4] | Columna 5 |]
Los Span o uniones de columnas en una celda se pueden realizar tanto en los títulos como en el cuerpo.
También hay que destacar que hay que controlar bien el número de columnas por fila para que éstas sean igual y comunes en todas.
Es importante destacar también que las celdas también serán formateadas según los parámetros de WMarkDown, como las negrillas u otras marcas que pueda haber en éstas.
Finalmente, también decir que se pueden hacer celdas que pueden tener saltos de línea. Ésto se puede llevar a cabo mediante comillas tanto dobres como simples.
- typewmd-examples
- characters241
- lines12
[| |= Columna 1 | Columna 2 | Columna 3 | Celda 1-A | Celda 2-A | Celda 3-A | Celda 1-B | "Celda 2-B Esto es más contenido de la celda 2-B." | Celda 3-B | Celda 1-C | 'Celda 2-C Esto es más contenido de la celda 2-C.' | Celda 3-C |]
Es importante destacar que las celdas se consideran subelementos, es decir, no son considerados elementos de bloque como párrafos o similares y quedan plenamente condicionadas a subelementos de bloque, por eso, en el ejemplo aquí mostrad, pese a haber doble salto de línea, éste permanece como una única línea.
Es importante mencionar también que si un texto empieza y acaba por comillas dobles o comillas simples, éstas se omitirán en el resultado final pues se entenderá que son conjuntos para gestionar en multilínea.
Listas
Los listas en WMarkDown se basan en una mezcla entre lo que son las listas crudas de MarkDown así como en las listas de MediaWiki, con un concepto de personalización para determinar si un elemento está contraído o no, permitiendo así controlar la visualización inicial de la lista.
Es importante mencionar que la visualización de los elementos compactados depende plenamente de que JavaScript esté habilitado en el navegador pues por defecto no se mostrarán y las acciones dinámicas dependerán plenamente de que éste esté habilitado.
Partiendo de la idea de MarkDown para la gestión de Listas y sus marcas alternativas se creó un subprotocolo que condiciona qué marca se usar'para qué fin pues no todas las marcas funcionan igual, además, éste sistema altera la guía de buenas prácticas de MarkDown pues éste dice de usar siempre la misma marca en la misma lista o nivel de la misma, mientras que aquí se podrá ir alternando según intereses. Las marcas con sus significados son los siguientes:
- *: El asterisco nos indica una lista desordenada estándar, sin posibilidad de desplegar o compactar.
- +: El signo más nos dice que será una lista desordenada y que ésta estará desplegada por defecto con opción a compactar.
- −: El signo menos nos dice que será una lista desordenada y que ésta estará compactada por defecto con opción a desplegar.
- #: El signo comodín, o sostenido o numérico indica que será una lista ordenada mediante números que parten del valor "1".
- 1.: Cualquier número seguido de un punto nos indica una lista ordenada numérica cuyo valor inicial será el del primer elemento puesto.
- a.: Cualquier letra, a excepción de la letra i latina, seguida de un punto nos indica que será una lista ordenada alfabéticamente. Éste puede ser en mayúsculas para indicar que las letras sean mayúsculas, o minúsculas para lo contrario.
- i.: Un número romano seguido de un punto nos indica que la lista será ordenada con números romanos. Si éstos están en mayúsculas aparecerán en mayúsculas, y si son en minúsculas, éstos aparecerán en minúsculas.
En el caso de los elementos ordenados, éstos seguirán las pautas única y exclusivamente del primer elemento dado. Si por el medio se hacen saltos, se repiten o se mantienen valores, así como si se integran marcas de listas desordenadas, éstas continuarán su orden interpretando corrección del usuario.
Los tipos de listas que hay se pueden ver reflejadas en los siguientes ejemplos:
- typewmd-examples
- characters584
- lines41
Ejemplo de lista desordenada: * Elemento 1. * Elemento 2. * Elemento 3. * Elemento 4. * Elemento N. Ejemplo de lista ordenada numérica: # Elemento 1. # Elemento 2. # Elemento 3. # Elemento 4. # Elemento N. Ejemplo de lista ordenada con inicio en otro valor que no sea uno. 4. Elemento 1. 5. Elemento 2. 6. Elemento 3. 7. Elemento 4. 8. Elemento N. La lista anterior sería igual que hacer lo siguiente: 4. Elemento 1. 4. Elemento 2. 4. Elemento 3. 4. Elemento 4. 4. Elemento N. O incluso lo siguiente: 4. Elemento 1. # Elemento 2. # Elemento 3. # Elemento 4. # Elemento N.
Las listas se pueden anidar, lo que hacen que crezcan en árbol. Para ello tenemos tanto la filosofía base de MarkDown mediante espacios y/o tabulaciones; como la filosofía de MediaWiki mediante el conjunto de marcas que determinan el nivel del elemento dentro de la lista.
- typewmd-examples
- characters460
- lines29
Listas anidadas por el método de MarkDown. * Elemento 1. * Elemento 2. * Elemento 2-1. * Elemento 2-2. * Elemento 2-2-1. * Elemento 2-3. * Elemento 3. * Elemento 4. * Elemento 4-1. * Elemento N. Listas anidadas por el método de MediaWiki. * Elemento 1. * Elemento 2. ** Elemento 2-1. ** Elemento 2-2. *** Elemento 2-2-1. ** Elemento 2-3. * Elemento 3. * Elemento 4. ** Elemento 4-1. * Elemento N. Ambas darán el mismo resultado.
Dentro de las listas anidadas hay dos marcas que permiten controlar si salen compactadas o desplegadas, lo que determina también que serían compactables o desplegables por el usuario final.
- typewmd-examples
- characters522
- lines16
* Elemento 1. Elemento desplegado pero no desplegable o compactable. * Elemento 1-1. * Elemento 1-2. * Elemento 1-3. - Elemento 2. Elemento desplegable que por defecto está plegado. * Elemento 2-1. + Elemento 2-2. Elemento desplegable, desplegado por defecto. * Elemento 2-2-1. - Elemento 2-3. Elemento desplegable que por defecto está plegado. * Elemento 2-3-1. * Elemento 3. + Elemento 4. Elemento desplegable que por defecto está desplegado. * Elemento 4-1. * Elemento N.
Como podemos observar, la guía de las buenas prácticas de MarkDown cara las listas, con este concepto se rompe.
También se pueden anidar listas ordenadas y desordenadas entre sí.
- typewmd-examples
- characters403
- lines27
Ejemplo en filosofía MarkDown. * Elemento 1. * Elemento 2. # Elemento 2-1. # Elemento 2-2. * Elemento 2-2-1. # Elemento 2-3. * Elemento 3. * Elemento 4. # Elemento 4-1. * Elemento N. Ejemplo en filosofía MediaWiki. * Elemento 1. * Elemento 2. *# Elemento 2-1. *# Elemento 2-2. *#* Elemento 2-2-1. *# Elemento 2-3. * Elemento 3. * Elemento 4. *# Elemento 4-1. * Elemento N.
Mediante la filosofía de poder cambiar la marca tanto en una lista ordenada como desordenada, a excepción del primer valor de las listas ordenadas, en una lista ordenada se pueden establecer elementos plegados y desplegados.
- typewmd-examples
- characters314
- lines19
4. Elemento 1. + Elemento 2. # Elemento 2-1. # Elemento 2-2. # Elemento 2-3. * Elemento 3. # Elemento 3-1. # Elemento 3-2. # Elemento 3-3. - Elemento 4. # Elemento 4-1. # Elemento 4-2. # Elemento 4-3. * Elemento N. # Elemento N-1. # Elemento N-2. # Elemento N-3.
Quotes o comentarios
Los Quotes o comentarios vienen siendo fragmentos de texto que se usan generalmente para matizar cosas dentro de lo que se quiera decir, remarcar información o simplemente añadir notas adicionales. Para referenciar el bloque Quote hemos de encabezar el párrafo mediante el caracter ">", lo que determinará que es un comentario o fragmento de texto explicativo.
- typewmd-examples
- characters179
- lines11
Esto es un párrafo normal. > Esto es un Quote o comentario. Esto es otro párrafo normal. > Esto es otro Quote. Esto pertenece al mismo Quote. > Esto es otro Quote distinto.
Los Quotes tienen 3 modos: los comentarios comunes añadidos o notas; lo mismo pero con iconificación de contenido para advertencias, preguntas, respuestas, etc., el cual puede ser personalizado a la Web en cuestión; y como comentario de usuarios específicos, que requiere de registrar a los usuarios en el propio gestor WMarkDown.
- typewmd-examples
- characters724
- lines20
> Esto es un comentario común o nota. > [!comment] Esto es lo mismo que lo anterior pero iconificado. > [!#] Esto es exactamente lo mismo que lo anterior pero simplificado. > [!# Comentario] Esto es lo mismo que lo anterior pero aclarando que es un comentario. El resultado se verá visualmente. > [!!] Esto es una advertencia o nota importante. > [!Q] Esto es un comentario directo. > [!?] Esto es para realizar preguntas dentro del texto. > [!>] Esto es para responder preguntas. > [!icono_personalizado Personalizado] Esto es un Quote con icono personalizado y con texto que advierte de que es un contenido personalizado. > [!@Usuario] Esto es un Quote a modo de comentario específico a una persona registrada.
Todos los los elementos pueden ser personalizables y nombrables.
Bloques de código
Los bloques de código están diseñados para poder mostrar códigos, Scripts, etc. De forma que el texto esté monoespaciado, con conteo de líneas y caracteres, así como visualización del número de línea donde te encuentras y con la posibilidad de ir visiblemente ayudado de un Syntax Highlighter. Básicamente viene siendo un bloque que se generará a nivel visual, a modo de caja donde se incluirá el código dado y formateado de la forma anteriormente descrita.
Los bloques de código siguen la filosofía de MarkDown por simplicidad a la hora de se implementados. Los bloques de código de MediaWiki son ignorados aquí por el hecho de que acaban siendo bloques HTML, cosa que ya se pueden integrar manualmente.
- typewmd-examples
- characters119
- lines8
A continuación se expone un bloque de HTML. ```html <h3>Ejemplo</h3> <p>Esto es un ejemplo de <b>HTML</b>.</p> ```
Estos bloques también pueden ser usados para módulos que requieran de un bloque con las órdenes, parámetros o descripciones necesarias. Dichos módulos son los siguientes:
- math, maths o mathjax: El módulo "maths" o de matemáticas nos permite visualizar funciones y operaciones matemáticas a partir de código MathJax a partir de la librería "mathjax.js".
- mermaid o mermaidjs: Este módulo se utiliza para representar gráficos, flujos, esquemas, etc. A partir de la librería "mermaid.js".
- wmd-examples: Este módulo es específico para WMarkDown y nos permite hacer ejemplos dinámicos contra el cliente de textos formateados en WMarkDown.
- wmd-options: Este módulo nos permite especificar las opciones cara un documento WMarkDown, por lo general el título y el código de idioma utilizado.
- wmd o wmarkdown: Vienen siendo bloques especiales que se ponen fuera de lo que son textos WMarkDown que identifican en un texto plano, bloques que han de ser procesados como WMarkDown.
Estos bloques se procesarán en el cliente pues no afecta inicialmente al SEO para su salida directa en HTML, por lo tanto, éstos aparecerán reflejados en HTML como bloques de código convencionales.
- typewmd-examples
- characters410
- lines28
A continuación tenemos un Script JS. ```js console.log("Esto es un ejemplo de impresión por consola en JavaScript."); ``` Ahora mostramos un ejemplo de un flujo. ```mermaid flowchart TD A["Elemento A"] B["Elemento B"] C["Elemento C"] A --> B B --> C ``` Finalmente, mostramos un ejemplo de función matemática. ```maths # Ejemplo hallando el siguiente punto. (x_3, y_3) = (x_1, y_1) - (x_2, y_2) ```
También puede ser usado simplemente para representar texto plano.
- typewmd-examples
- characters194
- lines13
```txt Esto es un texto plano. ``` ``` Esto es otro texto plano sin nombre de formato. ``` ```lenguaje-desconocido Al ser un lenguaje desconocido, éste saldrá también como texto plano. ```
Para poder representar los bloques de código tenemos varias marcas las cuales son las siguientes:
Marca | |
---|---|
Compactado | Espaciado |
``` | ` ` ` |
''' | ' ' ' |
""" | " " " |
Compactado | Espaciado |
Marca |
¿Por qué existen varias formas de llamar a los bloques de código? Básicamente por versatilidad pues habrá lenguajes o fragmentos de código que se quieran representar y éstos contengan conjuntos de caracteres que puedan hacer conflicto con el propio bloque de código, por tanto, hay estas opciones para que el usuario pueda elegir entre ellas. Este es el motivo por el cual se pudo ejemplificar los bloques de código en el propio WMarkDown.
Por otro lado, y terminando con los bloques de código, también hay un tipo de bloques de código especiales que son los wmd o wmarkdown, que nos sirven para identificar bloques de código WMarkDown para ser procesados dentro de un bloque de texto plano, como se explicó anteriormente. Normalmente se suelen poner en documentos directos como HTML para que éstos sean procesados parcialmente y ahorrar proceso y recursos, así como posibles errores y complicaciones.
- typehtml
- characters401
- lines19
<h1>Ejemplo de incrustación</h1> <p>Esto es un bloque de código HTML normal.</p> " " "wmd ## Ejemplo Aquí empieza un bloque de código WMarkDown el cual será procesado en HTML, pero se ignorará lo que esté fuera de este bloque. ```txt Ejemplo de bloque dentro de otro bloque, pero éste será procesado como bloque de código WMarkDown. ``` " " " <p>Esto ya está fuera del dominio anterior.</p>
Los bloques de código incrustados, como el que vemos en este ejemplo también pueden ir encapsulados entre dos comentarios XML.
<!-- [[WMD]] -->
Esto nos permite no salir del formato HTML ni XML en el IDE.
Módulo de Links de presentación
Este módulo está orientado a facilitar una presentación visual y estética de elementos.
Este módulo nació con la idea de presentar proyectos externos de los que depende el proyecto actual que se documenta mediante WMarkDown; lenguajes de programación y tecnologías usadas; o bien, para mostrar proyectos que hacen uso público de la tecnología que se presenta. Es un poco a modo de créditos pero se puede usar para otras muchas cosas, como presentación de usuarios, personas, miembros, etc.
Este elemento consta de 3 partes:
- Título: Viene siendo un texto de presentación o nombre del elemento en cuestión.
- Avatares: Links a imágenes que representen dicho elemento. Éste permite más de una imagen pues, en orden vertical irá cogiendo el primero que le salga sin error. Al ser normalmente un recurso externo, éste puede fallar, por lo que teniendo más de una opción, éste tendrá más dificultades a que falle.
- Links: Los Links son enlaces a Webs, ya sean oficiales, de información o de proyectos, entre otros, que se le pueden vincular. Por defecto, el icono del Link será el favicon del sitio Web al que se hace referencia.
Para definir cada uno de los elementos, basándose en la estructura sintáctica de Python, se usarán líneas, las cuales determinan que si no tienen espacios de inicio es el título; si empieza con un asterísco es una opción para avatar; y si no, sería un Link de referencia.
- typewmd-examples
- characters1091
- lines36
El siguiente bloque sería un ejemplo de este módulo: [[""" AnP *https://anp.k3y.pw/images/AnP.png *https://anp.k3y.pw/images/AnP-512.png *https://anp.k3y.pw/favicon.ico https://anp.k3y.pw/ https://git.k3y.pw/AnP/AnP CDN de KyMAN *https://cdn.k3y.pw/images/CDN.png *https://cdn.k3y.pw/images/CDN-512.png *https://cdn.k3y.pw/favicon.ico https://cdn.k3y.pw/ https://git.k3y.pw/KyMAN/CDN ErrorsManager *https://errorsmanager.k3y.pw/images/ErrorsManager.png *https://errorsmanager.k3y.pw/images/ErrorsManager-512.png *https://errorsmanager.k3y.pw/favicon.ico https://errorsmanager.k3y.pw/ https://git.k3y.pw/KyMAN/ErrorsManager Kanvas *https://kanvas.k3y.pw/images/Kanvas.png *https://kanvas.k3y.pw/images/Kanvas-512.png *https://kanvas.k3y.pw/favicon.ico https://kanvas.k3y.pw/ https://git.k3y.pw/KyMAN/Kanvas MuWeb *https://muweb.k3y.pw/images/MuWeb.png *https://muweb.k3y.pw/images/MuWeb-512.png *https://muweb.k3y.pw/favicon.ico https://muweb.k3y.pw/ https://git.k3y.pw/KyMAN/MuWeb """]]
Para describir alguna cosa concreta de alguno de estos elementos ha de hacerse fuera del módulo.
Módulo de exclusión
El módulo de exclusión está diseñado para ignorar fragmentos de texto para que éstos no se representen con marcas. Esto es muy importante para poder representar bloques de HTML, ejemplos o simplemente, exponer fragmentos de texto con caracteres que pertenecen a las marcas. Hay dos formas de excluir estos elementos.
- typewmd-examples
- characters319
- lines9
Exclusión completa de un texto. [[!Esto es un bloque de texto excluído, y esto [x] no es un Checkbox seleccioando. Tampoco funcionará el diccionario.]] Exclusión de caracteres. Esto es un texto no excluído y esto [x] sí es un Checkbox seleccionado, pero \[x] esto ya no lo es. Aquí sí funcionaría el diccionario.
Es importante mencionar que los Slashes escapan sólo una serie de caracteres pues en la anterior versión escapaban todo tipo de caracteres y podía llegar a complicar ciertas cosas. Actualmente está la filosofía de que si hay algo que requiere de escaparse constantemente implica que está mal, por lo que la limitación de caracteres escapados ha de ser mínima.
Inclusiones
Una de las características principales de WMarkDown es la capacidad de éste para poder integrar dentro de sí mismo otros recursos externos, por ejemplo, otro archivo HTML, MarkDown o WMarkDown, permitiendo así poder gestionar una documentación ordenada a partir de directorios y ficheros y a la par, poder crear OnePages donde visualizar dicho contenido. Para poder llevar a cabo dicha tarea podemos seguir el siguiente ejemplo:
- typewmd-examples
- characters234
- lines9
## Ejemplo inclusión Esto es un párrafo de presentación del título donde nos encontramos. [[include otro.fichero.w.md]] Ahora podemos continuar con nuestro fichero habiendo incluído el contenido del fichero "otro.fichero.w.md".
De esta forma podemos integrar dentro de nuestro documento diferentes ficheros con el fin de tenerlos ordenados para su trabajo así como generar documentación OnePage para facilitar la accesibilidad a los usuarios a ésta.
Las inclusiones crean secciones o bloques donde se meterá todo su contenido a modo de capa, y las inclusiones de primer nivel tendrán un link que permita ir al documento en cuestión. Con esto se entiende que se permite el anidamiento de inclusiones de archivos.
Es importante destacar que se pueden producir bucles infinitos cuando un fichero llama a otro el cual llama al primero de forma directa o indirecta. Es muy importante controlar este proceso de forma adecuada y correcta.
También es importante destacar que los títulos anidados tendrán su valor de origen pudiendo dar lugar a problemas si no se gestionan de una forma adecuada.
Por otro lado, decir que los Links que genera para ir a la página o documento a la que hace referencia sólo se mostrará en las de primer nivel porque dichos Links son dinámicos a su punto de origen donde si el origen es un elemento incluído anidadamente éste podría alojar un Path erróneo.
Diccionarios
Los diccionarios en WMarkDown son una herramienta para ayudar a escribir sin preocuparse en definir elementos que puedan resultar complejos, profesionales o simples interpretaciones. La idea simplemente es la creación de un diccionar JSON el cual será cargado y en base a los patrones establecidos éste los implementará en los textos del propio WMarkDown para que el usuario, al Clickar en dichos elementos les salga qué es para ti, además de permitir el muestreo de definiciones de forma anidada.
La implementación de los diccionarios es automática siempre que se le halla dado algún archivo de diccionario. Si éste no fue dado, los diccionarios no se post-procesarán.
El formato JSON de los diccionarios viene siendo un Array donde se implementará en cada elemento del mismo un término, y los términos tendrían un formato también de Array donde:
- Patrón y corrección: Éste puede ser un único Array con un patrón regular y el texto corregido que quieres que se tenga uniformemente; o bien, un Array de elementos los cuales, como antes, sería un Array con un patrón y el texto corregido que quieres que se tenga uniformemente.
- Definición: Viene siendo la definición, el cual puede ser un simple String o un Array para poder hacer saltos de línea.
- Links: Links de interés tanto para más información como Webs oficiales y proyectos.
Un ejemplo de ésto puede ser el siguiente:
- typejson
- characters1631
- lines39
[[ [ ["/\\bwmarkdown\\b/ig", "WMarkDown"], ["/\\b(wmd\\b|w\\.m\\.d\\.|w\\. +m\\. +d\\. +)/ig", "WMD"] ], [ "El WMarkDown es un proyecto que nos permite hacer documentación y textos ", "formateados desde un lenguaje de marcas sencillo que parte como idea de ", "lenguajes de marcas como MarkDown y MediaWiki, personalizado a usos más ", "extensos, flexibles y fáciles." ], [ "https://wmarkdown.k3y.pw/", "https://git.k3y.pw/Whalers/WMarkDown" ] ], [ ["/\\bmedia *wiki\\b/gi", "MediaWiki"], [ "MediaWiki es un proyecto Free Open Source que viene siendo la base de Webs ", "como Wikipedia entre otros, el cual permite gestionar publicaciones y ", "documentación en un entorno flexible, abierto y extendido con una gran ", "comunidad que lo sustenta." ], [ "https://www.mediawiki.org/", "https://es.wikipedia.org/wiki/MediaWiki", "https://github.com/wikimedia/mediawiki" ] ], [ [ ["/\\bmarkdown\\b/gi", "Markdown"], ["/(?<!\\.)\\bmd\\b|\\b(m\\.d\\.|m\\. +d\\. +)/ig", "MD"] ], [ "Markdown es un estándar de lenguaje de marcas que se desarrolló para facilitar ", "la documentación con texto formateado en los proyectos, tanto a un nivel visual ", "mediante texto plano como una vez formateado." ], [ "https://daringfireball.net/projects/markdown", "https://daringfireball.net/projects/markdown/syntax", "https://es.wikipedia.org/wiki/Markdown", "https://www.markdownguide.org/" ] ]]
Si nos fijamos en el ejemplo, los patrones utilizados se basan en patrones regulares de JavaScript. El propio WMarkDown se encargará de adaptarlo al entorno correspondiente, pero es importante seguir este sistema.
Este ejemplo busca patrones que tengan que ver con WMarkDown, MediaWiki y Markdown, marcando en el texto procesado como elementos consultables y los cuales desplegarán un elemento flotante a su altura con la información requerida.
Documentación de Código
El módulo de Documentación de Código o Code Doc es un módulo que sirve para identificar elementos concretos dentro del código fuente del proyecto de forma genérica. Está basado en documentar funciones y métodos principalmente aunque permite más funciones que éstas. Las funciones y los métodos, en base a la filosofía de este módulo, están diseñadas en base a un entorno fuertemente tipado con estructuras de sobrecargas y argumentos opciones. Su estructura se basa en marcas que identifican las diferentes partes.
- typewmd-examples
- characters201
- lines5
[[@ [String] WMarkDown.process(!String data, Integer lanuage = 1, ?String path = null)]] [[@ [String] WMarkdown.analyse(!String data, Integer language = 1, Integer mode = 0, ?String path = null)]]
El módulo crearía una capa adaptada al espacio del párrafo el cual tendría el bloque de llamada explicado a nivel de código y una tabla con los argumentos definidos de una forma simplificada para ayudar en su comprensión.
La sintaxis es sencilla, parte de lo siguiente:
- Tipado de respuesta: Es un elemento opcional comprendido entre corchetes que determina el tipado de respuesta. Si no se especifica, por defecto será void (Vacío).
- Acceso: Es un elemento opcional que determina el acceso a dicho elemento, donde si no se nombra se entenderá como elemento público, pero sino, indicaría lo siguiente:
- Privado: Determina que el elemento del que se habla tiene acceso únicamente privado y se representa mediante el caracter "!".
- Protegido: Determina que el elemento del que se habla tiene acceso protegido por su herencia y se representa mediante el caracter "?".
- Espacio de nombres: Es un elemento opcional que determina el espacio de nombres para llegar hasta éste, ya sea por nombre de Clase, por el propio espacio de nombres, o ambos juntos como puede suceder en PHP.
- Ámbito: Es un elemento opcional que determina el la separación entre el espacio de nombres y el nombre del elemento se separan por un caracter el cual indica uno de estos dos casos.
- Objeto: Se indica con un punto (".") e indica que parte de la creación de un objeto a partir de la clase que lo nombra. En caso de no haber nombre
- Estático: Se indica con dos puntos (":") e indica que parte de la clase que lo nombra.
- Método o Elemento: Nombre del método o elemento al que se hace referencia.
- Argumentos: Bloque opcional que se especifica únicamente en caso de ser un método o una función, entre paréntesis tendrá los argumentos de entrada. Cada argumento tendría lo siguiente:
- Obligatorio: El primer elemento es opcional e indica si es opcional u obligatorio donde si hay al inicio del argumento un cierre de exclamación ("!") indica que es obligatorio, sino nos indica que es opcional.
- Nulleable: El segundo elemento es opcional e indica si es nulleable o no donde si hay al inicio del argumento un cierre de interrogación ("?") indica que es nulleable, sino, no admite valores nulos.
- Tipado: El tercer elemento es obligatorio e indica el tipado del argumento.
- Nombre: El cuarto elemento es obligatorio e indica el nombre del argumento.
- Valor por defecto: El quinto elemento es opcional y especifica el valor por defecto que tiene ese argumento. Sólo se especifica para argumentos opcionales cuando éstos tienen un valor por defecto. Se identifica por ir separado con el signo igual ("=") del nombre hasta la coma que lo separa. En caso de ser un String, diccionario o Array se identifica su final con el cierre del mismo.
- Valor por defecto: Bloque opcional diseñado para valores de variables y constantes que representa su valor por defecto. Se distingue de los argumentos mediante la separación con el nombre del método con el caracter iguale ("=").
El Espacio de nombres y el Ámbito van juntos, es decir, si se especifican han de existir los dos, si no, no se ha de especificar ninguno de los dos.
Puede haber más de un tipado alternativo. Éstos se separan con el caracter tubería ("|").
Cara los tipados, el nombre que se le dé dependerá del desarrollador y del propio nombre de las clases de los que parten los posibles objetos, sin embargo, hay que destacar que se espera encapsulados entre diamantes en casos de ser Vectores o definición de diccionarios y/o objetos.
- typewmd-examples
- characters179
- lines7
<!-- Definidión de una variable que viene siendo un vector de Objetos cuyos elementos pueden ser de cualquier tipado. --> [[@ [Array<Object<String, Any>>] ejemplo]]
Cuando hablamos de variables o métodos y funciones que no tienen argumentos, la tabla de definición de argumentos no aparecerá, o en caso de ser alterado el CSS original del WMarkDown, saldrá vacía.
Para especificar valores nulos o cualquier valor aconsejamos, por mantener un estándar basado en JSDoc (No se sigue plenamente la filosofía de JSDoc, pero si se basa bastante en ésta) el uso de Null y Any consecutivamente. También destacar que Any no representa entre sus valores ni a Null ni a "undefined" en el caso de JavaScript.