Creando anotaciones con Markdown

Recientemente comencé a tomar el curso Javascript: programando en lenguaje de la web y decidí organizarme en relación a las anotaciones que estoy creando.

Normalmente guardo las anotaciones en cuadernos, que entre nosotros no es muy eficiente cuando necesito buscar algún texto específico, además que con el paso del tiempo se acaban olvidados en el armario.

Para solucionar este problema, elegí usar github que además de mantener la organización, podemos hacer uso del lenguaje de marcado Markdown, que convertirá nuestro texto a HTML válido.La primera clase del curso de Javascript se llama Introducción, ahora que el repositorio está listo, podemos pasar a las anotaciones.

Creando anotaciones

Para crear un archivo, simplemente pulsa en Create new files y tendremos acceso al editor de texto dentro de github. No debemos olvidar guardar el nombre del archivo con la extensión .md, ya que queremos escribir en markdown.

Ahora que estamos listos para escribir, comencemos con el título.

Título en markdown

En markdown podemos elegir entre título y variaciones de subtítulo usando el signo # como siendo la cantidad que representa el estilo del título:

# Título nivel 1 ## Título nivel 2 ### Título nivel 3 #### Título nivel 4 ##### Título nivel 5 ###### Título nivel 6

El nombre del primer video es "¿Por qué aprender Javascript?" Dejémoslo como título nivel 2:

¿Por qué aprender Javascript?

Con el título de la primera clase creado, anotamos algunos temas importantes.

Listas ordenadas y desordenadas

Como me gusta hacer anotaciones por temas, markdown nos ofrece dos posibilidades.

La primera opción es utilizar listas ordenadas, colocando el número seguido de punto antes del tema:

1. Es el lenguaje de programación nativo de la web.

2. Es un lenguaje muy poderoso que permite al usuario interactuar con la página.

3. JavaScript está presente en varias áreas del desarrollo, ampliando las habilidades del desarrollador a las más diversas ramas de la tecnología.

La segunda opción es la lista desordenada, para usarla simplemente ponga * antes del tema:

• Es el lenguaje de programación nativo de la web.

• Es un lenguaje muy poderoso que permite al usuario interactuar con la página.

• JavaScript está presente en varias áreas del desarrollo, ampliando las habilidades del desarrollador a las más diversas ramas de la tecnología.

Otra cosa que me gusta hacer es resaltar palabras clave, veamos cómo podemos hacerlo con markdown.

Colocar palabras en negrita y cursiva

Para resaltar las palabras tenemos la opción de usar negrita xx o cursiva x en las palabras:

• Es el lenguaje de programación nativo de la web.

• Es un lenguaje muy poderoso que permite al usuario interactuar con la página.

• JavaScript está presente en varias áreas del desarrollo, ampliando las habilidades del desarrollador a las más diversas ramas de la tecnología.

En las próximas clases ya veremos algunos pequeños tramos de código y por suerte markdown ofrece una muy buena solución para llevar a cabo este tipo de tarea.

Usando bloque de código

El primer código con el que tenemos contacto en el curso es una función alert que muestra el famoso Hola Mundo. Para dejar la anotación en formato de código tenemos que abrir un bloque con tres backticks (\`) colocar el nombre del lenguaje y cerrar con tres backticks (\`).

¡Este formato es realmente genial!

Durante la clase el instructor también hizo una citación muy interesante y me gustaría indicar que es una citación. ¿Cómo podemos hacer esto usando markdown?

Usando blockquote (citación)

Markdown nos ofrece una manera muy fácil de crear citaciones, basta usar > antes del texto y como resultado tendremos:

Ya hicimos anotaciones de dos clases, ahora modifiquemos un poco más el README, haciéndolo más didáctico con imágenes, enlaces, checkbox y algunas informaciones más.

Colocando una imagen en README

Coloquemos una imagen para hacer nuestro repositorio más alegre y más fácil de entender de qué se trata. Usamos el siguiente tramo de código:

Con la intención de hacer que el README sea más completo, crearemos enlaces que redirigirán a clases específicas.

Creando enlaces

Para crear los enlaces a las clases, simplemente hagamos:

[nombre de la clase] (url de la clase)

Y tendremos el siguiente resultado:

Como vemos, Introducción apareció en azul, lo que indica enlace. Cuando pulsemos sobre él, seremos direccionados a las anotaciones de la clase Introducción.

Otro formato interesante para colocar en nuestro README son las checkboxes, que indicará si esa clase está o no completa.

Checkbox

El código para usar checkbox es muy similar al de los enlaces, lo que lo diferencia es un corchete extra que si dejamos una X indica que la clase está completa, en caso contrario la dejamos vacía de esta manera:

• [x] Introducción

Vemos nuestra checkbox al lado de las clases.Para terminar las anotaciones de la clase 2, creemos una tabla para que sea más fácil ver el significado de algunas tags.

Tabla

Para crear una tabla usando markdown, necesitamos hacer la combinación de pipeline | y guion - :

Esa fue la forma que encontré para organizar mis estudios y, además, ¡aprendí a usar varios tipos de formatos con markdown!

Para saber más

En esta lista hay una gran cantidad de emojis que podemos usar para hacer con que nuestras anotaciones se vean más =)Y para finalizar colocaremos una barra de progreso para indicar cuánto queda para completar el curso utilizando el siguiente formato:

La barra de progreso aparece justo debajo del título, ¡genial!

Si estás interesado en cómo funciona Javascript y cómo puede usarlo mejor, aquí en Alura tenemos una formación de ingenieros front-end. Ahí verás cómo programar en Javascript, mientras usas mis consejos para crear anotaciones.

Puedes leer también:

• Llenando un formulario HTML automáticamente con AJAX
• JavaScript replace: manipulando Strings y regex
• JavaScript: ¿Cuándo debo usar forEach y map?