Guia_Markdown.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Guía de Markdown"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Índice\n",
    "\n",
    "* [Introducción](#Introducción)\n",
    "* [Títulos](#Títulos)\n",
    "* [Énfasis](#Énfasis)\n",
    "* [Código](#Código)\n",
    "* [Listas](#Listas)\n",
    "* [Citas](#Citas)\n",
    "* [Bloques de HTML](#Bloques-de-HTML)\n",
    "* [Líneas y caracteres especiales](#Líneas-y-caracteres-especiales)\n",
    "* [Enlaces](#Enlaces)\n",
    "* [Imágenes](#Imágenes)\n",
    "* [Cuadros](#Cuadros)\n",
    "* [Matemáticas](#Matemáticas)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Introducción"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Markdown](https://es.wikipedia.org/wiki/Markdown) es un [lenguaje de marcas](https://es.wikipedia.org/wiki/Lenguaje_de_marcado) nacido para simplificar el desarrollo de páginas *web*. Provisto de una sintaxis muy simple, Markdown permite escribir un documento en texto plano, fácilmente legible, que luego el intérprete de este lenguaje convierte a HTML para que pueda ser procesado por un navegador. Por ejemplo, el código Markdown\n",
    "\n",
    "```\n",
    "Las *estaciones* del año son:\n",
    "* primavera,\n",
    "* verano,\n",
    "* otoño,\n",
    "* invierno.\n",
    "\n",
    "```\n",
    "\n",
    "es equivalente, en HTML, a\n",
    "\n",
    "```\n",
    "<p>Las <em>estaciones</em> del año son:</p>\n",
    "<ul>\n",
    "<li>primavera,</li>\n",
    "<li>verano,</li>\n",
    "<li>otoño,</li>\n",
    "<li>invierno.</li>\n",
    "</ul>\n",
    "```\n",
    "\n",
    "Como bien muestra este ejemplo, es obviamente mucho más fácil escribir y leer el código Markdown que el HTML.\n",
    "\n",
    "Desarrollado inicialmente por [John Gruber](https://daringfireball.net/projects/markdown/), existen hoy en día múltiples variantes e intérpretes de Markdown. En esta guía explicaremos la sintaxis de la versión llamada GFM (*Github Flavoured Markdown*), que es, esencialmente, la que se usa en las celdas de texto de un cuaderno Jupyter. \n",
    "Para ampliar detalles, cabe acudir a la [especificación completa]( https://github.github.com/gfm) de este lenguaje.\n",
    "\n",
    "En la mayor parte de los ejemplos que proporcionaremos se indica primero cuál es la *entrada*, esto es, el código Markdown que se introduce en la celda de texto, y se presenta después cuál es el *resultado* visible en la celda tras evaluar ésta (pulsando, por ejemplo, <span class=\"tecla\">Shift</span> + <span class=\"tecla\">Return</span> o\n",
    "<span class=\"tecla\">Ctrl</span> + <span class=\"tecla\">Return</span>).\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Títulos\n",
    "\n",
    "Para generar el título de un apartado, se escribe de una a seis veces el carácter `#`, según el nivel que se quiera asignar al título:\n",
    "\n",
    "```\n",
    "# Título de primer nivel\n",
    "## Título de segundo nivel\n",
    "### Título de tercer nivel\n",
    "```\n",
    "\n",
    "Y así  sucesivamente. Por ejemplo, el título principal de este documento se genera así:\n",
    "\n",
    "````\n",
    "# Guía de Markdown\n",
    "````\n",
    "\n",
    "Los títulos de primer y segundo nivel también se pueden obtener mediante un subrayado con los caracteres `=` (primer nivel) o `-`(segundo nivel), repetidos al menos tres veces. Por ejemplo,\n",
    "\n",
    "```\n",
    "Título de primer nivel\n",
    "====\n",
    "```\n",
    "\n",
    "```\n",
    "Título de segundo nivel\n",
    "-----------------------\n",
    "```\n",
    "\n",
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>\n",
    "\n",
    "\n",
    "## Énfasis\n",
    "\n",
    "Se puede resaltar el texto escribiéndolo en letra cursiva, en negrita, tachándolo o combinando estos estilos:\n",
    "\n",
    "Entrada | Resultado\n",
    ":------------ | :-------------\n",
    "`*Texto en cursiva*` | *Texto en cursiva*\n",
    "`_Texto en cursiva_` | _Texto en cursiva_\n",
    "`**Texto en negrita**` | **Texto en negrita**\n",
    "`**Texto en negrita y _también cursiva_**` | **Texto en negrita y _también cursiva_**\n",
    "`_Texto en cursiva y **también negrita**_` | _Texto en cursiva y **también negrita**_\n",
    "`~~Texto tachado~~` | ~~Texto tachado~~\n",
    "\n",
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Código\n",
    "\n",
    "Para mostrar bloques de código de un lenguaje de programación, se anteponen cuatro espacios a cada línea de código, o bien se encierra todo el bloque entre dos líneas que contienen los caracteres <code>\\`\\`\\`</code> (tres acentos graves) o <code>\\~\\~\\~</code> (tres tildes). En la primera línea, tras estos caracteres, se puede añadir el nombre del lenguaje de programación.\n",
    "    \n",
    "\n",
    "#### Ejemplo\n",
    "    \n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "    ```python\n",
    "    def dibujar(n, a=-2*pi, b=2*pi, **args):\n",
    "        show(plot(x*sin(n*x), (x,a,b), **args))\n",
    "    dibujar(2, b=5*pi, color=\"green\", frame=True)\n",
    "    ```\n",
    "\n",
    "<hr class=\"medio\">\n",
    "\n",
    "```python\n",
    "def dibujar(n, a=-2*pi, b=2*pi, **args):\n",
    "    show(plot(x*sin(n*x), (x,a,b), **args))\n",
    "dibujar(2, b=5*pi, color=\"green\", frame=True)\n",
    "```\n",
    "<hr class=\"ejemplo\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Listas\n",
    "\n",
    "En una lista no numerada, se marcan todos los ítems con uno de los siguientes caracteres: `*`, `+` o `-`. En las listas numeradas, cada ítem va precedido de un número y un punto; no hace falta que el número sea distinto en cada ítem. Las listas pueden estar anidadas. Asimismo, si además se añaden los caracteres `[ ]` o `[x]`, se obtiene una lista de tareas.\n",
    "\n",
    "#### Ejemplo\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "```\n",
    "Asignaturas de primer curso de los grados de Ciencias y de Ciencia de Datos:\n",
    "\n",
    "1. Grado de Ciencias\n",
    "   * Primer cuatrimestre\n",
    "     + Álgebra lineal\n",
    "     + Cálculo I\n",
    "     + Biología\n",
    "     + Programación\n",
    "     + Introducción a la Ciencia de Datos\n",
    "   * Segundo cuatrimestre\n",
    "     - Estadística I\n",
    "     - Fundamentos de Física\n",
    "     - Estructura de datos\n",
    "     - Matemática discreta\n",
    "     - Cálculo II\n",
    "1. Grado de Ciencia de Datos\n",
    "   * Primer cuatrimestre:\n",
    "     1. Álgebra lineal\n",
    "     1. Cálculo I\n",
    "     1. Biología\n",
    "     1. Programación\n",
    "     1. Química\n",
    "   * Segundo cuatrimestre:\n",
    "     1. Estadística I\n",
    "     1. Fundamentos de Física\n",
    "     1. Química para las biociencias\n",
    "     1. Bioquímica\n",
    "     1. Cálculo II\n",
    "```\n",
    "<hr class=\"medio\">\n",
    "\n",
    "Asignaturas de primer curso de los grados de Ciencias y de Ciencia de Datos:\n",
    "\n",
    "1. Grado de Ciencias\n",
    "   * Primer cuatrimestre\n",
    "     + Álgebra lineal\n",
    "     + Cálculo I\n",
    "     + Biología\n",
    "     + Programación\n",
    "     + Introducción a la Ciencia de Datos\n",
    "   * Segundo cuatrimestre\n",
    "     - Estadística I\n",
    "     - Fundamentos de Física\n",
    "     - Estructura de datos\n",
    "     - Matemática discreta\n",
    "     - Cálculo II\n",
    "1. Grado de Ciencia de Datos\n",
    "   * Primer cuatrimestre:\n",
    "     1. Álgebra lineal\n",
    "     1. Cálculo I\n",
    "     1. Biología\n",
    "     1. Programación\n",
    "     1. Química\n",
    "   * Segundo cuatrimestre:\n",
    "     1. Estadística I\n",
    "     1. Fundamentos de Física\n",
    "     1. Química para las biociencias\n",
    "     1. Bioquímica\n",
    "     1. Cálculo II\n",
    "     \n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "#### Ejemplo\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "```\n",
    "Cosas que hacer el fin de semana:\n",
    "- [ ] Ordenar la habitación\n",
    "- [x] Salir con los amigos\n",
    "- [x] Ver el partido de Osasuna\n",
    "- [ ] Estudiar Cálculo II\n",
    "- [x] Ayudar a mi hermano a hacer los deberes\n",
    "```\n",
    "<hr class=\"medio\">\n",
    "\n",
    "Cosas que hacer el fin de semana:\n",
    "- [ ] Ordenar la habitación\n",
    "- [x] Salir con los amigos\n",
    "- [x] Ver el partido de Osasuna\n",
    "- [ ] Estudiar Cálculo II\n",
    "- [x] Ayudar a mi hermano a hacer los deberes\n",
    "\n",
    "<hr class=\"ejemplo\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Citas\n",
    "\n",
    "Se antepone el signo `>` a cada línea del texto citado. Duplicando o triplicando este signo se obtienen más niveles de citas.\n",
    "\n",
    "#### Ejemplo\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "```\n",
    "Dámaso Alonso, poeta, filólogo y otrora director de la RAE,\n",
    "afirmaba:\n",
    "> Bécquer es el creador de uno de los mundos poéticos más\n",
    "> simples, más hondos, más etéreos, más irreales y\n",
    "> extraordinarios de los que la humanidad ha producido.\n",
    "```\n",
    "\n",
    "<hr class=\"medio\">\n",
    "\n",
    "Dámaso Alonso, poeta, filólogo y otrora director de la RAE,\n",
    "afirmaba:\n",
    "> Bécquer es el creador de uno de los mundos poéticos más\n",
    "> simples, más hondos, más etéreos, más irreales y\n",
    "> extraordinarios de los que la humanidad ha producido.\n",
    "\n",
    "<hr class=\"ejemplo\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Bloques de HTML\n",
    "\n",
    "En las celdas de texto se puede mezclar Markdown y HTML, pero, si se hace de cualquier manera, lo más probable es que el código Markdown no pueda ser interpretado. Las reglas concretas que cabe aplicar son un tanto complejas. No obstante, como regla general, hay que separar mediante líneas en blanco el código Markdown y las etiquetas HTML siempre que éstas sean, como `div` o `p`, de las que generan texto en modo resaltado.\n",
    "\n",
    "#### Ejemplo\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "```\n",
    "<p>\n",
    "El **código Markdown** de este párrafo _no_ es procesado.\n",
    "</p>\n",
    "\n",
    "<p>\n",
    "    \n",
    "El **código Markdown** de este párrafo, en cambio, _sí_ es procesado.\n",
    "\n",
    "</p>\n",
    "```\n",
    "\n",
    "<hr class=\"medio\">\n",
    "\n",
    "<p>\n",
    "El **código Markdown** de este párrafo _no_ es procesado.\n",
    "</p>\n",
    "\n",
    "<!-- Comentario: El código siguiente funciona en el cuaderno Jupyter:\n",
    "<p>\n",
    "    \n",
    "El **código Markdown** de este párrafo, en cambio, _sí_ es procesado.\n",
    "\n",
    "</p>\n",
    "Sin embargo, no ocurre así al convertirlo a HTML. \"Trucamos\" el código\n",
    "para que, en cualquier caso, se refleje el resultado correcto.-->\n",
    "\n",
    "<p>\n",
    "    \n",
    "El <strong>código Markdown</strong> de este párrafo, en cambio, <em>sí</em> es procesado.\n",
    "\n",
    "</p>\n",
    "\n",
    "\n",
    "<hr class=\"ejemplo\">\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Líneas y caracteres especiales\n",
    "\n",
    "Las líneas horizontales se generan escribiendo `---` en un renglón aislado. También se puede usar `***` o `___`. En los tres casos, puede haber más de tres caracteres, los cuales, además, pueden estar separados por espacios en blanco. Así pues, es válido escribir, por ejemplo, `* * * *` para obtener la siguiente línea:\n",
    "\n",
    "* * * *\n",
    "\n",
    "Para introducir un salto de línea, basta con terminar ésta con dos o más espacios en blanco o con `<br>`. Por último, si se antepone la barra inversa a un carácter, éste se comporta como un carácter ordinario y es escrito tal cual.\n",
    "\n",
    "#### Ejemplo\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "```\n",
    "Algunas \\*palabras\\* de este párrafo están acotadas por  \n",
    "\\*\\*asteriscos\\*\\*, pero no son escritas en *cursiva* o  \n",
    "**negrita** porque los asteriscos correspondientes están  \n",
    "precedidos del carácter \\\\. Por cierto, los cinco primeros  \n",
    "renglones de este párrafo acaban con dos espacios en  \n",
    "blanco (no visibles).\n",
    "```\n",
    "<hr class=\"medio\">\n",
    "\n",
    "Algunas \\*palabras\\* de este párrafo están acotadas por  \n",
    "\\*\\*asteriscos\\*\\*, pero no son escritas en *cursiva* o  \n",
    "**negrita** porque los asteriscos correspondientes están  \n",
    "precedidos del carácter \\\\. Por cierto, los cinco primeros  \n",
    "renglones de este párrafo acaban con dos espacios en  \n",
    "blanco (no visibles).\n",
    "<hr class=\"ejemplo\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Enlaces\n",
    "\n",
    "Toda dirección *web* escrita en la celda se transforma inmediatamente en un enlace, como, por ejemplo, http://www.unavarra.es. En cambio, para asociar un enlace a un texto, la sintaxis es \n",
    "\n",
    "```\n",
    "[texto](dirección_web \"título\")\n",
    "```\n",
    "\n",
    "o bien\n",
    "\n",
    "```\n",
    "[texto][etiqueta]\n",
    "\n",
    "[etiqueta]: dirección_web \"título\"\n",
    "```\n",
    "\n",
    "El `título`, que se puede omitir, es el texto que se muestra al pasar el cursor sobre el enlace. En el segundo tipo de sintaxis, se sitúa `[texto][etiqueta]` en el punto en el que deba aparecer el enlace; la otra línea puede estar antes o después dentro de la celda. Si el `texto` y la `etiqueta` son iguales,  se puede escribir simplemente `[etiqueta]` en lugar de `[etiqueta][etiqueta]`.\n",
    "\n",
    "#### Ejemplo\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "```\n",
    "En la *web* de la [UPNA](http://www.unavarra.es/ \"Universidad Pública de Navarra\")\n",
    "se puede encontrar información completa sobre los grados de [Ciencias] y de \n",
    "[Ciencia de Datos][CdD], así como sobre el doble grado de \n",
    "[Ciencia de Datos y Administración de Empresas][CdD+ADE].\n",
    "\n",
    "[Ciencias]: http://www.unavarra.es/sites/grados/ciencias/ciencias/presentacion.html\n",
    "[CdD]: http://www.unavarra.es/sites/grados/ciencias/ciencia-de-datos/presentacion.html\n",
    "[CdD+ADE]: http://www.unavarra.es/sites/grados/ciencias/doble-ciencia-datos-ade/presentacion.html\n",
    "```\n",
    "<hr class=\"medio\">\n",
    "\n",
    "En la *web* de la [UPNA](http://www.unavarra.es/ \"Universidad Pública de Navarra\")\n",
    "se puede encontrar información completa sobre los grados de [Ciencias][] y de\n",
    "[Ciencia de Datos][CdD], así como sobre el doble grado de\n",
    "[Ciencia de Datos y Administración de Empresas][CdD+ADE].\n",
    "\n",
    "[Ciencias]: http://www.unavarra.es/sites/grados/ciencias/ciencias/presentacion.html\n",
    "[CdD]: http://www.unavarra.es/sites/grados/ciencias/ciencia-de-datos/presentacion.html\n",
    "[CdD+ADE]: http://www.unavarra.es/sites/grados/ciencias/doble-ciencia-datos-ade/presentacion.html\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "La `dirección_web` puede ser también un identificador de la propia página, para así crear enlaces internos. Si se pasa el cursor sobre un título, por ejemplo, se puede ver el identificador que automáticamente se le ha asociado.\n",
    "\n",
    "#### Ejemplo\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "```\n",
    "Tras concluir la lectura de este apartado, quizá quieras volver al [principio](#Guía-de-Markdown) o revisar las secciones sobre [confección de listas](#Listas) o [bloques de HTML](#Bloques-de-HTML).\n",
    "```\n",
    "<hr class=\"medio\">\n",
    "\n",
    "Tras concluir la lectura de este apartado, quizá quieras volver al [principio](#Guía-de-Markdown) o revisar las secciones sobre [confección de listas](#Listas) o [bloques de HTML](#Bloques-de-HTML).\n",
    "<hr class=\"ejemplo\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Imágenes\n",
    "\n",
    "Si se arrastra una imagen sobre una celda de texto o, equivalentemente, si se selecciona ésta mediante el menú \n",
    "<span style=\"background: #e9e9e9; padding:1px\">Edit&#x25b8; Insert Image</span> del cuaderno Jupyter, se inserta un código de la forma\n",
    "\n",
    "````\n",
    "![texto_alternativo](attachment:nombre_del_fichero)\n",
    "````\n",
    "\n",
    "Al evaluar la celda, se muestra la imagen correspondiente. También se puede escribir este código directamente. Así pues, para incorporar, por ejemplo, el fichero `bosque.jpg`, que muestra la fotografía de un bosque en otoño, se podría escribir lo siguiente:\n",
    "\n",
    "```\n",
    "![Bosque en otoño](attachment:bosque.jpg)\n",
    "```\n",
    "\n",
    "Si la foto está localizable en internet, se puede proporcionar su dirección a modo de nombre del fichero.\n",
    "\n",
    "#### Ejemplo\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "```\n",
    "La página principal de la UPNA presenta uno de sus logotipos, en concreto, éste:\n",
    "![Logotipo de la UPNA](http://www.unavarra.es/si/assets/img/core/upna-logo.svg)\n",
    "```\n",
    "<hr class=\"medio\">\n",
    "\n",
    "La página principal de la UPNA presenta uno de sus logotipos, en concreto, éste:\n",
    "![Logotipo de la UPNA](http://www.unavarra.es/si/assets/img/core/upna-logo.svg)\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "El inconveniente de este modo de proceder es que no se puede regular el tamaño de la imagen. Para conseguir esto, no queda más remedio que usar directamente HTML.\n",
    "\n",
    "#### Ejemplo\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "```\n",
    "La siguiente fotografía muestra a los componentes del equipo iGEM 2019 de la UPNA, en el que participaron algunos estudiantes de los grados de Ciencias y de Ciencia de Datos:\n",
    "<img src=\"http://www2.unavarra.es/gesadj/seccionActualidad/Fotos%20Notas%20Prensa/2019/06/06/Concurso%20iGEM.jpg\" width=\"450px\">\n",
    "```\n",
    "<hr class=\"medio\">\n",
    "\n",
    "La siguiente fotografía muestra a los componentes del equipo iGEM 2019 de la UPNA, en el que participaron algunos estudiantes de los grados de Ciencias y de Ciencia de Datos:\n",
    "<img src=\"http://www2.unavarra.es/gesadj/seccionActualidad/Fotos%20Notas%20Prensa/2019/06/06/Concurso%20iGEM.jpg\" width=\"450px\">\n",
    "\n",
    "<hr class=\"ejemplo\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Cuadros\n",
    "\n",
    "La sintaxis para la construcción de cuadros es bastante simple. Ha de seguir el siguiente esquema:\n",
    "\n",
    "```\n",
    "| Cabecera 1 | Cabecera 2 | ... | Cabecera n |\n",
    "|------------|------------|-----|------------|\n",
    "| Celda 11   | Celda 12   | ... | Celda 1n   |\n",
    "| Celda 21   | Celda 22   | ... | Celda 2n   |\n",
    "| ...        | ...        | ... | ...        |\n",
    "| Celda m1   | Celda m2   | ... | Celda mn   |\n",
    "```\n",
    "\n",
    "No hace falta que, como en este esquema, el contenido de las columnas esté alineado; no obstante, facilita la lectura del código. Se obtiene el cuadro siguiente:\n",
    "\n",
    "| Cabecera 1 | Cabecera 2 | ... | Cabecera n |\n",
    "|------------|------------|-----|------------|\n",
    "| Celda 11   | Celda 12   | ... | Celda 1n   |\n",
    "| Celda 21   | Celda 22   | ... | Celda 2n   |\n",
    "| ...        | ...        | ... | ...        |\n",
    "| Celda m1   | Celda m2   | ... | Celda mn   |\n",
    "\n",
    "Si se quiere tener un mayor control sobre la presentación del cuadro, es preciso recurrir a HTML y CSS.\n",
    "\n",
    "#### Ejemplo\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "```\n",
    "El cuadro siguiente muestra los valores de las temperaturas en Pamplona a lo largo del año, expresadas en ºC, así como las precipitaciones mensuales, medidas en mm:\n",
    "\n",
    "| Mes | Temp. mínima | Temp. media | Temp. máxima | Precipitaciones |\n",
    "|------------|------|------|------|----|\n",
    "| enero      |  1.2 |  5   | 8.9  | 63 |\n",
    "| febrero    |  1.9 |  6.5 | 11.1 | 52 |\n",
    "| marzo      |  3.3 |  8.6 | 14   | 52 |\n",
    "| abril      |  4.9 | 10.2 | 15.5 | 77 |\n",
    "| mayo       |  8.2 | 14   | 19.8 | 74 |\n",
    "| junio      | 11.2 | 17.5 | 23.9 | 47 |\n",
    "| julio      | 13.7 | 20.7 | 27.6 | 40 |\n",
    "| agosto     | 14   | 20.9 | 27.8 | 43 |\n",
    "| septiembre | 11.7 | 18   | 24.4 | 43 |\n",
    "| octubre    |  8.4 | 13.6 | 18.7 | 74 |\n",
    "| noviembre  |  4.3 |  8.6 | 12.8 | 80 |\n",
    "| diciembre  |  2.4 |  6   |  9.7 | 75 |\n",
    "```\n",
    "\n",
    "<hr class=\"medio\">\n",
    "\n",
    "El cuadro siguiente muestra los valores de las temperaturas en Pamplona a lo largo del año, expresadas en ºC, así como las precipitaciones mensuales, medidas en mm:\n",
    "\n",
    "| Mes | Temp. mínima | Temp. media | Temp. máxima | Precipitaciones |\n",
    "|------------|------|------|------|----|\n",
    "| enero      |  1.2 |  5   | 8.9  | 63 |\n",
    "| febrero    |  1.9 |  6.5 | 11.1 | 52 |\n",
    "| marzo      |  3.3 |  8.6 | 14   | 52 |\n",
    "| abril      |  4.9 | 10.2 | 15.5 | 77 |\n",
    "| mayo       |  8.2 | 14   | 19.8 | 74 |\n",
    "| junio      | 11.2 | 17.5 | 23.9 | 47 |\n",
    "| julio      | 13.7 | 20.7 | 27.6 | 40 |\n",
    "| agosto     | 14   | 20.9 | 27.8 | 43 |\n",
    "| septiembre | 11.7 | 18   | 24.4 | 43 |\n",
    "| octubre    |  8.4 | 13.6 | 18.7 | 74 |\n",
    "| noviembre  |  4.3 |  8.6 | 12.8 | 80 |\n",
    "| diciembre  |  2.4 |  6   |  9.7 | 75 |\n",
    "\n",
    "<hr class=\"ejemplo\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Matemáticas\n",
    "\n",
    "Markdown no tiene, propiamente, ningún modo propio de escritura de fórmulas o expresiones matemáticas. No obstante, en las celdas de texto de un cuaderno Jupyter, es posible incluir texto matemático escrito en lenguaje [LaTeX](https://www.latex-project.org/), que es convertido en HTML y CSS por un intérprete llamado [MathJax](https://www.mathjax.org/) para que así pueda ser mostrado en el navegador.\n",
    "\n",
    "MathJax procesa todo el texto que se encuentre en *modo matemático*, del cual se distinguen dos tipos. Se escriben en el *modo ordinario* las expresiones matemáticas que se entremezclan en los párrafos con el texto normal. El *modo resaltado* se emplea para destacar una expresión matemática, mostrándola en uno o más renglones separados del texto que la rodea. En una celda de un cuaderno Jupyter, la sintaxis que corresponde a cada modo es la siguiente:\n",
    "\n",
    "* modo ordinario: <code>&bsol;&bsol;(expresión matemática&bsol;&bsol;)</code> o bien `$expresión_matemática$`,\n",
    "  \n",
    "* modo resaltado: <code>&bsol;&bsol;[expresión_matemática&bsol;&bsol;]</code> o bien `$$expresión_matemática$$`.\n",
    "\n",
    "En este último modo, los caracteres que acotan la expresión pueden estar en líneas independientes. Observemos asimismo que la duplicación de la barra inversa se debe a que la celda es leída primero por Markdown, lenguaje en el que, como en LaTeX, tal carácter tiene un significado especial. En LaTeX estándar, o en otro entorno de uso de MathJax, se escribe directamente <code>&bsol;(...&bsol;)</code> o <code>&bsol;[...&bsol;]</code>. Hay también otros modos de entrar en modo matemático resaltado.\n",
    "\n",
    "Nos conformaremos aquí con dar sólo un ejemplo.\n",
    "\n",
    "#### Ejemplo\n",
    "\n",
    "<hr class=\"ejemplo\">\n",
    "\n",
    "```\n",
    "La igualdad $(a+b)^2=a^2+b^2+2ab$ no es más que un caso particular de la fórmula conocida como *binomio de Newton*:\n",
    "$$\n",
    "  (a+b)^n = \\sum_{k=0}^n \\binom{n}{k} a^{n-k}b^k.\n",
    "$$\n",
    "En efecto, si $n=2$, esta fórmula establece que\n",
    "$$\n",
    "  (a+b)^2 = \\binom{2}{0} a^2 + \\binom{2}{1} ab + \\binom{2}{2} b^2. \n",
    "$$\n",
    "Pero\n",
    "$$\n",
    "  \\binom{2}{0}=\\binom{2}{0}=1 \\qquad\\text{y}\\qquad \\binom{2}{1}=2,\n",
    "$$\n",
    "de donde resulta la igualdad mencionada.\n",
    "```\n",
    "\n",
    "<hr class=\"medio\">\n",
    "\n",
    "La igualdad $(a+b)^2=a^2+b^2+2ab$ no es más que un caso particular de la fórmula conocida como *binomio de Newton*:\n",
    "$$\n",
    "  (a+b)^n = \\sum_{k=0}^n \\binom{n}{k} a^{n-k}b^k.\n",
    "$$\n",
    "En efecto, si $n=2$, esta fórmula establece que\n",
    "$$\n",
    "  (a+b)^2 = \\binom{2}{0} a^2 + \\binom{2}{1} ab + \\binom{2}{2} b^2. \n",
    "$$\n",
    "Pero\n",
    "$$\n",
    "  \\binom{2}{0}=\\binom{2}{0}=1 \\qquad\\text{y}\\qquad \\binom{2}{1}=2,\n",
    "$$\n",
    "de donde resulta la igualdad mencionada.\n",
    "<hr class=\"ejemplo\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"text-align:right\">\n",
    "<a href=#Índice\n",
    "   style=\"padding:0.5em;background:#7d5d3b;color:#ffffff;text-decoration:none;\n",
    "          border:1px solid #54381e;border-radius:5px;\">Volver al índice</a>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div class=\"alert alert-block alert-warning\">\n",
    "<strong>Celda de configuración</strong>.\n",
    "La evaluación de la celda siguiente cambia el formato por omisión de este cuaderno.\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>\n",
       "h1{text-align: center; color: rgb(185,74,72);}\n",
       "h2{text-align: center; color: rgb(0,102,0); padding: 0.25em 0;\n",
       "   border: 2px solid rgb(0,191,0); border-width: 2px 0;}\n",
       "h3{border-bottom: 2px solid rgb(153,153,153);} \n",
       "h4{color: rgb(58,135,173); font-size: 115%!important;\n",
       "   font-weight: bold!important;}\n",
       ".text_cell_render{font-family: \"Trebuchet MS\",Geneva,sans-serif;\n",
       "                  font-size: 110%; line-height: 1.5;}\n",
       ".MathJax_Display{margin: 0.5em 0;}\n",
       "th, td{font-size: larger;}\n",
       "hr.ejemplo{border: 1px solid rgb(58,135,173); background: white;}\n",
       "hr.medio{border: 1px dashed gray; background: white;}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<style>\n",
    "h1{text-align: center; color: rgb(185,74,72);}\n",
    "h2{text-align: center; color: rgb(0,102,0); padding: 0.25em 0;\n",
    "   border: 2px solid rgb(0,191,0); border-width: 2px 0;}\n",
    "h3{border-bottom: 2px solid rgb(153,153,153);} \n",
    "h4{color: rgb(58,135,173); font-size: 115%!important;\n",
    "   font-weight: bold!important;}\n",
    ".text_cell_render{font-family: \"Trebuchet MS\",Geneva,sans-serif;\n",
    "                  font-size: 110%; line-height: 1.5;}\n",
    ".MathJax_Display{margin: 0.5em 0;}\n",
    "th, td{font-size: larger;}\n",
    "hr.ejemplo{border: 1px solid rgb(58,135,173); background: white;}\n",
    "hr.medio{border: 1px dashed gray; background: white;}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div class=\"alert alert-success\">\n",
    "Realizado por <emph>Juan José Torrens</emph> para la asignatura de <strong>Cálculo II</strong><br>\n",
    "Grados de <strong>Ciencias</strong> y de <strong>Ciencia de Datos</strong><br>\n",
    "Universidad Pública de Navarra<br>\n",
    "Última versión: 15-1-2021\n",
    "</div>"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "SageMath 9.1",
   "language": "sage",
   "name": "sagemath"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}