[Tutorial] Editor del foro - Markdown para Dummies


  • 0

    Guía Markdown para Dummies

    Índice

    1. Guía
      1. Lo básico (formato, color, tamaño de letra y spoilers)
      2. Tablas
      3. Listados
      4. Alineaciones
      5. Separadores
      6. Insertar imágenes o enlaces
      7. Otros

    2. PREGUNTAS FRECUENTES (especialmente si vienes de otro foro)

    3. CONVERSORES A MARKDOWN (para textos largos manteniendo el formato)

    4. ENLACES QUE DETECTA EL FORO


    1 Lo básico

    Como habréis comprobado, con el paso de vBulletin a NodeBB también se ha cambiado de editor de texto. El que se ha elegido para NodeBB es un editor Markdown y la gran y principal baza que tiene con respecto a vBulletin es que los códigos para dar formato al texto son más sencillos y por lo tanto más fáciles de recordar. Al principio pueden sonar a chino pero a medida que vayamos usándolos nos daremos cuenta de que los BBCodes de vB están algo anticuados además de ser algo engorrosos para el usuario medio. Y ya no os cuento el HTML :facepalm:

    Con esta guía os voy a explicar uno a uno todos los códigos que se pueden utilizar en nuestro editor, cada uno asociado a un icono situado sobre el cuadro de texto. Empecemos.

    Estos son los iconos y su título correspondiente:]

    Leyenda de iconos

    En esta tabla tenéis el uso de los elementos básicos (cursiva, negrita, subrayado y tachado) . NOTA: Si te apareciera "undefined" puedes verla también en este otro post:

    Nombre Código Cómo se queda
    Cursiva *italica1* o _italica2_ italica1 o italica2
    Negrita **negrita1** o __negrita2__ negrita1 o negrita2
    Subrayado ~subrayado~ ~subrayado~
    Tachado ~~Tachado ~~ ~~Tachado ~~

    Color

    Podemos también seleccionar un color para un texto. Para ello usaremos esto (sin los espacios):

    %(#ff0000 )[selección de color]
    

    donde entre paréntesis pondremos el código hexadecimal correspondiente al color elegido y entre corchetes el texto que vayamos a colorear.


    Tamaño de letra

    A la hora de aumentar el tamaño del texto se usará la almohadilla en una combinación de hasta seis símbolos. El tamaño estandar de un texto corresponde al uso de cinco almohadillas. El mayor tamaño de un texto se consigue con una sóla almohadilla y el más pequeño con seis. Eso sí, SIEMPRE hay que dejar un espacio entre los símbolos y el texto al que vamos a dar formato. Más o menos sería esto:]

    ###### Tamaño de caracteres
    ##### Cuantas más almohadillas (hasta seis)
    #### más pequeño hacemos el texto
    ### el tamaño "normal" se consigue con cinco almohadillas) 
    ## por lo que no es necesario indicarle el tamaño ya que lo selecciona por defecto
    # y este es el tamaño mayor que se puede conseguir
    

    y quedaría tal que así:

    Tamaño de caracteres
    Cuantas más almohadillas (hasta seis)

    más pequeño hacemos el texto

    el tamaño "normal" se consigue con cinco almohadillas)

    por lo que no es necesario indicarle el tamaño ya que lo selecciona por defecto

    y este es el tamaño mayor que se puede conseguir


    Spoilers

    En el subforo de Cine y TV, por poner un ejemplo, se suele usar una etiqueta para contar parte de un argumento pero que puede "estropear" a otros usuarios la emoción de ver una serie o película con cierta sorpresa. Esa etiqueta la conocemos todos y es el Spoiler. En Markdown han facilitado la cosa y se consigue insertando el signo ">" seguido del signo "!". A continuación, y entre paréntesis, la palabra "Spoiler" (o el texto que queramos mostrar) y después el texto, imagen o vídeo que queramos esconder:]

    >! (Spoiler. Pulsa dentro del recuadro naranja) Esto es un spoiler
    

    Y quedaría así:

    ! (Spoiler. Pulsa dentro del recuadro naranja) Esto es un spoiler :P


    Ahora imaginad que estamos en un hilo, en medio de un debate, y queremos citar a un usuario (quote). Lo haríamos con el botón de las comillas del editor y aparecería esta secuencia:]

    @Usuario:
    > esto es un 'quote'
    

    El resultado sería este:

    @Usuario:

    esto es un 'quote' :mgalletas:

    Si lo que queremos es mencionar a otro usuario sólo tenemos que teclear la arroba (@) y la primera letra del nick, tras lo cual aparecerá un listado para completar automáticamente.


    2 Tablas

    OPCIÓN A: Se pueden hacer utilizando aplicaicones online para markdown como esta: http://www.tablesgenerator.com/markdown_tables (escribis lo que queráis, pulsais GENERATE y sale la tabla hecha; copiais el código al foro y ya está)

    OPCIÓN B: O escribimos el código directamente (realmente es más rápido..), siguiendo este esquema:

    1. Se ponen los encabezados separando los elementos con | Ejemplo: Centro |Izquierda | Derecha

    2. Se crea la tabla -----|----|---- marcando las alineaciones:
      IZQUIERDA: |:------|
      CENTRO: |:------:|
      DERECHA: |------:|

    3. Se escriben los elementos separados por |como en encabezado.

    EJEMPLO:

    Encabezado01 | Encabezado 02 | Encabezado 03
    :-----------------------:|:----|----:
    Centro |Izquierda| Derecha
    1 | 2  |3
    4|5|6
    7|8|9
    10|11|12
    13|14|15
    
    Encabezado01 Encabezado 02 Encabezado 03
    Centro Izquierda Derecha
    1 2 3
    4 5 6
    7 8 9
    10 11 12
    13 14 15

    3 Listados

    A la hora de hacer una lista podemos ordenarla de forma numérica:

    Listado numérico
    
    1. elemento1
    2. elemento2
    3. elemento3
    
    Otro modo de listado numérico
    
    1. elemento1
    1. elemento2
    1. elemento3
    

    Este sería el aspecto de las listas numéricas:

    Listado numérico

    1. elemento1
    2. elemento2
    3. elemento3

    Otro modo de listado numérico

    1. elemento1
    2. elemento2
    3. elemento3

    En el caso de que queramos utilizar un número seguido de un punto sin que se liste hay que poner una barra inversa entre el número y el punto:

    1. elemento
    1976\. elemento
    

    y queda así:]

    1. elemento
      1976. elemento

    para evitar esto:]

    1. elemento
    2. elemento

    También se puede hacer una lista de elementos sin numerar. Para ello se puede utilizar tanto un asterisco, como un signo "mas" o un guión sencillo (o signo "menos") delante del elemento que vayamos a listar, pero dejando SIEMPRE un espacio entre el signo y el elemento:

    Listado sin numerar
    
    * elemento
    * elemento
    * elemento
    
    + elemento
    + elemento
    + elemento
    
    - elemento
    - elemento
    - elemento
    

    El resultado sería el mismo independientemente del signo que hayamos usado y quedaría así:

    Listado sin numerar

    • elemento
    • elemento
    • elemento
    • elemento
    • elemento
    • elemento
    • elemento
    • elemento
    • elemento

    4 Alineaciones

    Hay personas a las que les gusta tener todo muy ordenado y cuando escriben textos no lo son menos. Para ello siempre se puede utilizar el alineado de texto. Para ello usaremos los siguientes códigos (los resultados los pongo justo debajo).

    <-Alinear texto a la izquierda<-
    

    <-Alinear texto a la izquierda<-

    ->Centrar texto<-
    

    ->Centrar texto<-

    ->Alinear texto a la derecha->
    

    ->Alinear texto a la derecha->

    =>Esto es justificar. Entre los signos de la derecha e izquierda escribimos el texto a justificar. Aquí abajo os dejo un texto "Lorem ipsum" de ejemplo.<=
    

    =>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu urna nisl. In non mi lectus. Nullam bibendum nisi in magna sagittis placerat. Ut vel consectetur lacus. Fusce maximus semper felis non congue. Praesent lacus nunc, ultrices ac nunc quis, fermentum elementum lectus. Mauris fermentum fermentum pulvinar. Nam in dictum libero. Suspendisse sollicitudin arcu at justo vulputate, vel porta ex pulvinar. Aliquam erat volutpat. In mollis tristique tortor sit amet mollis. Etiam mattis maximus mi, ac maximus nisi ultricies eu. Integer iaculis ullamcorper est, sed porta elit.

    Phasellus sollicitudin, eros sed consequat hendrerit, justo neque gravida lorem, eget ultrices mauris augue ac felis. Donec pellentesque enim et ante consectetur vehicula. Nulla porttitor ullamcorper velit, eu imperdiet dui molestie sed. Donec imperdiet congue ante et pulvinar. Nulla eget lorem condimentum, interdum elit nec, rhoncus elit. Donec a quam dignissim, laoreet ligula eu, scelerisque eros. Mauris ex diam, mattis ac diam at, consectetur vulputate enim. Donec ac tempor quam. Aliquam ante tortor, tristique ullamcorper massa cursus, tincidunt rhoncus urna. Mauris rhoncus est ac turpis gravida, vitae lacinia dolor laoreet. Nunc finibus dolor dolor, eu luctus enim dignissim sed".<=


    5 Separadores

    Si queremos hacer un posts por partes o con secciones separadas pero sin abrir otro post hacemos uso de las líneas de separación. En internet existen cientos de miles de páginas web donde se alojan imágenes que se pueden usar libremente. Pero si queremos que nuestra publicación sea lo más "plana" posible siempre tenemos la opción de usar una línea fina. Para ello no tenemos más que incrustar cualquiera de estas secuencias de símbolos (asteriscos, guiones o guiones bajos de tres en tres, juntos o separados):

    ***
    ___
    
    ---
    
    * * *
    _ _ _
    
    - - -
    

    y el resultado serían estas seis líneas casi invisibles que hay justo aquí debajo:







    6 Insertar imágenes o enlaces

    Los hilos en los que se incrustan imágenes suelen tener bastante movimiento. Hay dos modos para hacerlo. Para publicar una imagen utilizaremos el siguiente código:

    ![imagen adjunta desde nuestro almacenamiento](url de la imagen generada automáticamente) 
    

    Al subir la imagen se generará una url ya que dicha imagen se alojará en imgur.com de forma automática.]

    Aunque la opción más fácil de subir una imagen es arrastrarla desde la carpeta de origen hasta la ventana del editor (los que venís de usar Shurscript sabréis a qué nos referimos) y se generará el mismo código que hay arriba]

    Otro modo de agregar una imagen a un post es usando directamente la url de la imagen que tendremos alojada en nuestro servidor o un servidor público (como imgur por ejemplo):

    ![texto alternativo en caso de no poder cargarse la imagen](url de la imagen)
    

    Entre corchetes pondremos el texto alternativo a la imagen que queremos que aparezca en caso de que el enlace esté roto o dicha imagen no cargue.


    A veces utilizamos hipervínculos en nuestros posts. Para ello generaremos este código:

    [texto a enlazar](url del enlace "Title")
    

    En el que entre corchetes pondremos el texto a enlazar y entre paréntesis la url de destino. Dentro del paréntesis, junto a la url podemos incluir el texto que aparecería al pasar el ratón sobre el vínculo. Algo así:]

    [Éxodo, tu foro y el de más gente](http://exo.do "Éxodo, el foro")
    

    Y este sería el resultado (pasa el cursor sobre el enlace para ver el efecto del "Title"):

    Éxodo, tu foro y el de más gente

    Si lo que queremos es utilizar el mismo enlace como texto vinculado no hace falta incrustar código si no la propia url, que será convertida a hipervínculo automáticamente por el editor.

    Si necesitamos que el vínculo creado nos direccione a una dirección de correo electrónico basta con poner el email entre los signos "<" y ">":

    <[email protected]>
    

    Y quedaría así:]

    [email protected]


    7 Otros

    Si lo que queremos es insertar código sin que el editor le de formato (tal y como yo he hecho en esta guía, y aparece en los espacios en negro a modo de ejemplo) pondríamos tres acentos graves (o invertidos) sobre el código que queremos mostrar y tres debajo.

    ```
    aquí se insertaría el código
    ```

    y quedaría así:]

    así aparecería el código :D
    

    También podemos hacerlo de este modo:

    `aquí se insertaría el código`
    

    y quedaría con este otro aspecto:

    así aparecería el código


    Y "eso es todo amigos" :mola: Espero que la guía haya sido lo suficientemente clara como para que comprendáis todas las posibilidades de edición que tiene un texto con Markdown. Tened paciencia por que como ya os he dicho al principio de esta guía, a medida que vayáis usando los códigos iréis cogiéndole el gustazo. Además, seguro que con estos códigos seréis los artistas del NodeBB :sisi1: ]

    PREGUNTAS FRECUENTES

    1. ¿Dónde está la multicita? ¡Vaya nodeBB!

    Para multicitar sólo tienes que ir citando los mensajes que quieras, el nodebb irá poniendo uno debajo del otro.

    1. Quiero hacer la típica gracia de dejar muchos espacios pero con el nodebb este no me deja

    En NODEBB se hace rellenándo los huecos con "\". Por ejemplo:

    Hola
    \
    \
    \
    \
    \
    Hasta luego
    

    Hola





    Hasta luego

    1. Eres un mentiroso, no me funcionan los códigos. ¿Por qué? :lloron:

    Lo habrás escrito mal. Muchas veces se coloca un espacio antes o después del código y da problemas, el código debe estar siempre tocando una letra (o una exclamación, un punto, un icono, etc.) y no el aire (salvo los códigos de listados, que deben de estar sueltos). Pongo un ejemplo:

    ** hola **, **hola ** y **hola** no es lo mismo
    

    ** hola **, **hola ** y hola no es lo mismo.

    1. ¿Cuando pongo un el ENLACE de un video de youtube siempre sale el video, cómo puedo hacer para que se quede simplemente como un enlace para hacer click? :lloron:

    Tienes que borrar el "http" de delante y quedarte con las "//", es la única manera

    Ej: //www.youtube.com/watch?v=dQw4w9WgXcQ
    Ej2: [Esto es un enlace a youtube](//www.youtube.com/watch?v=dQw4w9WgXcQ)
    

    Ej: //www.youtube.com/watch?v=dQw4w9WgXcQ
    Ej2: Esto es un enlace a youtube

    1. Intento poner enlaces en la firma y no me cabe por los links, sólo se me permite 250 carácteres. El nodebb es un natsi :lloron:

    Puedes usar un acortador o los enlaces internos del foro (que son bastante bastante cortos). Por ejemplo, si yo hago un link a este post sería quedándome sólo con el "/topic/" y el número:

    http://exo.do**~/topic/10994/~**tutorial-editor-del-foro-markdown-para-dummies/23

    Es decir -> /topic/10994/

    Ej: [Prueba de link](/topic/10994/)
    

    Ej: Prueba de link

    1. ¿Puedo poner una palabra en grande a medio texto?

    No. Hay otras formas de destacarla usando negrita, cursiva, ~subrayado ~o ~todo junto~.

    CONVERSORES A MARKDOWN

    Son útiles para abrir post. Si hacemos un copiar y pegar de información de otra página. Nos mantendrá las mayúsculas, negritas, cursivas, etc.

    ENLACES QUE DETECTA

    1. Links a Spotify
    spotify :track:id
    spotify :album:id
    spotify :user:marty:playlist:id
    
    Donde id es numero de la canción album o playlist en si.
    
    Ejemplo
    spotify :track:1mea3bSkSGXuIRvnydlB5b
    
    Para que funcione hay que quitar el espacio entre la "y" de spotify y los dos puntos : 
    
    1. Links detectados simplemente poniendo el enlace:
    • GIFV (de imgur): Aparecerá el GIFV
    • Youtube: Aparecerá el video.
    • WEBM: Aparecerá el video.
    • Twitter: Aparecerá el tweet.
    • Soundcloud: Nos aparecerá el reproductor.
    • Vocaroo: Aparecerá un pequeño widget.
    • Gifcat: Aparecerá el "gif"
    • Vine: Aparecerá el vídeo en loop (posible bug)

    OTROS EDITORES

    • Este editor lo uso bastante, no he visto ningún problema de compatibilidad con el foro de momento: http://dillinger.io/


  • 1

    Me parece genial este hilo, deseo subscribirme, pero no tengo idea, para tenerlo presente y no tener que andar preguntando... cómo se subscribe uno?



  • 2

    @madelman2.0 dijo:

    Me parece genial este hilo, deseo subscribirme, pero no tengo idea, para tenerlo presente y no tener que andar preguntando... cómo se subscribe uno?

    No sé si es exactamente eso, pero en la barra inferior del primer mensaje, donde citar y demás, hay un botón de seguir en el mensaje del OP.



  • 3

    @Shawn-Carter dijo:

    @madelman2.0 dijo:

    Me parece genial este hilo, deseo subscribirme, pero no tengo idea, para tenerlo presente y no tener que andar preguntando... cómo se subscribe uno?

    No sé si es exactamente eso, pero en la barra inferior del primer mensaje, donde citar y demás, hay un botón de seguir en el mensaje del OP.

    Gracias! éso parece que es! Como todo esto tiene tantas opciones, se hace uno la p... un lío. :aplauso:



  • 4

    Aún no se puede insertar vídeos, cierto?



  • 5

    @madelman2.0 dijo:

    Me parece genial este hilo, deseo subscribirme, pero no tengo idea, para tenerlo presente y no tener que andar preguntando... cómo se subscribe uno?

    @Shawn-Carter dijo:

    No sé si es exactamente eso, pero en la barra inferior del primer mensaje, donde citar y demás, hay un botón de seguir en el mensaje del OP.

    @madelman2.0 dijo:

    Gracias! éso parece que es! Como todo esto tiene tantas opciones, se hace uno la p... un lío. :aplauso:

    Eso es. De todos modos si te vas a tu perfil, Opciones, sale esto:

    Debes marcar las dos opciones y recibirás notificaciones desde los hilos creados y de los que comentas ;)

    @BassMasta dijo:

    Aún no se puede insertar vídeos, cierto?

    Sí, tanto desde YouTube como desde Vimeo y Vine. Sólo tienes que copiar y pegar la url tal cual. El editor se encarga de insertarlos automáticamente :mola:



  • 6


  • 7


  • 8

    las imágenes en portadas como va?



  • 9

    Muy bueno este hilo, gracias @JoseAsecas :mola:



  • 10

    :esdios:



  • 11

    @ñññ dijo:

    las imágenes en portadas como va?

    Sólo funciona en la plataformas. Una vez publicada, justo encima del título a la derecha verás un botón con un pincel. Le das y se abre una ventana de personalización donde puedes añadir/cambiar la imagen de portada (tiene que estar alojada en la red) y darle color a las barras que hay sobre cada post y a los enlaces.

    Espero haberte ayudado.

    @Rs2pro @Lambón gracias a vosotros ;)



  • 12

    Gracias por el tutorial! Yo me conocía la mayoría (los veo bastante intuitivo) pero no todo :roto2:



  • 13

    Sos groso sabelo, aca le dejo mis dies :mgalletas:



  • 14

    @JoseAsecas dejo esto por aquí: http://jondum.github.io/BBCode-To-Markdown-Converter/

    No funciona demasiado bien, pero al menos convierte nicks, negritas, etc. (falla el color y el texto centrado)



  • 15

    muy bueno el tuto, gracias!



  • 16

    Gracias por el Tuto Jose :mola:



  • 17

    Muy bueno, todo explicado perfectamente. :mola:



  • 18

    @Pixel dijo:

    @JoseAsecas dejo esto por aquí: http://jondum.github.io/BBCode-To-Markdown-Converter/

    No funciona demasiado bien, pero al menos convierte nicks, negritas, etc. (falla el color y el texto centrado)

    No está mal. Esta tarde lo pongo en el post principal. Gracias :mola:

    @Akrai @Talos @ZurdoFTW gracias guapos :gaydude:



  • 19

    @JoseAsecas dijo:

    @Pixel dijo:

    @JoseAsecas dejo esto por aquí: http://jondum.github.io/BBCode-To-Markdown-Converter/

    No funciona demasiado bien, pero al menos convierte nicks, negritas, etc. (falla el color y el texto centrado)

    No está mal. Esta tarde lo pongo en el post principal. Gracias :mola:

    @Akrai @Talos @ZurdoFTW gracias guapos :gaydude:

    Me mentiste :lloron:

    Podrías añadir (y yo lo resaltaría bastante) que se pueden poner enlaces a youtube poniendo // delante y borrando el "http:". (también se puede poner una @, pero imagino que si ponemos llamadas cargaremos el foro, no? @msf)

    Ejemplos:
    //www.youtube.com/watch?v=dQw4w9WgXcQ

    @https://www.youtube.com/watch?v=dQw4w9WgXcQ

    Parece una tontería pero muchas veces es un problema poner un enlace a youtube sin que ocupe tannnnnnto :S




Has perdido la conexión. Reconectando a Éxodo.