19_contenido_estatico.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![imagenes/pythonista.png](imagenes/pythonista.png)](https://pythonista.io)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Contenido estático."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**ADVERTENCIA:**  \n",
    "\n",
    "Para poder realizar exitosamente los ejercicios de esta notebook, es necesario haber seguido al pie de la letra y en orden sucesivo las instrucciones de todas las notebooks previas."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Existen algunos archivos a los que las plantillas de *Django* pueden acceder como contenido estáticos tales como.\n",
    "\n",
    "* Páginas estáticas en HTML.\n",
    "* Hojas de estilo (CSS).\n",
    "* Scripts en Javascript.\n",
    "* Imágenes.\n",
    "* Medios.\n",
    "* Documentos de diversas índoles."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Contenido estático en función del tipo de entorno.\n",
    "\n",
    "*Django* es un servidor de aplicaciones web que permite crear contenido de forma dinámica. Utilizarlo como un servidor web dedicado como lo son el servidor [*Apache*](https://httpd.apache.org/) y [*Nginx*](https://nginx.org) no sólo es ineficiente, sino que incluso podría representar un riesgo de seguridad.\n",
    "\n",
    "Es posible consultar un pequeño tutorial sobre cómo publicar contenido estático desde un servidor web dedicado en https://docs.djangoproject.com/en/3.0/howto/static-files/deployment/#serving-static-files-from-a-dedicated-server."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Entornos de desarrollo.\n",
    "\n",
    "Durante el ciclo de vida de un proyecto de desarrollo de software es común y recomendable desplegar distintos entornos para ciertas etapas. Los más comunes son:\n",
    "\n",
    "* *Entorno de desarrollo*, el cual corresponde al conjunto de recursos utilizado por el equipo de desarrollo a lo largo de un proyecto.\n",
    "* *Entorno de pruebas* el cual corresponde a los recursos utilizados para realizar las diversas pruebas y controles de calidad del producto de software.\n",
    "* *Entorno de producción* el entorno en el que el producto de software será publicado y utilizado por los usuarios del producto. \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Contenidos estático en entornos de producción.\n",
    "\n",
    "En el caso de que *Django* se encuentre en el entorno de producción, se recomienda que los contenidos estáticos sean puestos a disposición mediantes un servidor web dedicado, al cual accederá *Django*."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Contenidos estáticos en entornos de pruebas.\n",
    "\n",
    "Los entornos de pruebas pueden tener diversas configuraciones dependiendo de la metodólogía de desarrollo utilizada y de la naturaleza de las pruebas a realizarse.\n",
    "\n",
    "En este caso debe de ponderarse la conveniencia de utilizar un servidor web dedicado o utilizar a *Django* directamente."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Contenidos estáticos en entornos de desarrollo.\n",
    "\n",
    "Conforme las herramientas de virtualización y de contenedores han avanzado, los desarrolladores han podido acceder a entornos cada vez más dinámicos y capaces de emular, desplegar y configurar infraestructura de forma automatizada.\n",
    "\n",
    "Cada vez es más común que los entornos de desarrollo y pruebas sean lo más parecidos al entorno de producción, pero con recursos más limitados. Sin embargo, es posible tener un entorno de desarrollo razonablemente estable, permitiendo que *Django* gestione los contenidos estáticos en los entornos de desarrollo, particularmente si dicho entorno reside en computadoras personales de pocos recursos."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## La aplicación ```django.contrib.staticfiles```.\n",
    "\n",
    "Esta es una de las aplicaciones que viene por defecto con *Django* y es la que permite identificar, recolectar y guardar contendido estático."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## La instrucción ```manage.py collectstatic```.\n",
    "\n",
    "Esta instrucción ejecutada en el directorio del proyecto, recolectará los archivos estáticos de las aplicaciones y los guardará en el directorio indicado en la configuración.\n",
    "\n",
    "```\n",
    "python manage.py collectstatic <argumentos>\n",
    "```\n",
    "\n",
    "Al ejecutarse el comando, se realizará una búsqueda en todos los subdirectorios de proyecto y se pedirá una confirmación de la escritura de archivo.\n",
    "\n",
    "El argumento ```--noinput``` permite realizar la operación descrita sin que sea necesario interactuar con el usuario.\n",
    "\n",
    "La referencia completa puede ser encontrada en https://docs.djangoproject.com/en/3.0/ref/contrib/staticfiles/#django-admin-collectstatic."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Tratamiento de los recursos estáticos con la variable ```settings.DEBUG```.\n",
    "\n",
    "La variable ```settings.DEBUG``` define el comportamiento de *Django* en varios aspectos, incluyendo la forma en la que guarda los recursos estáticos.\n",
    "\n",
    "Cuando el valor de ```settings.DEBUG``` es ```True```, Django buscará automáticamente en el subdirectorio ```static/``` de cada aplicación en el proyecto y no es necesario tener un directorio único de defindo por ```settings.STATIC_ROOT```."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Configuración de los recursos estáticos.\n",
    "\n",
    "El archivo ```settings.py``` de un proyecto de *Django* permite definir ciertas variables para el manejo de archivos estáticos.\n",
    "\n",
    "La referencia de estas variables puede ser consultada  en https://docs.djangoproject.com/en/3.0/ref/settings/#static-files."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### La variable ```settings.STATIC_URL```.\n",
    "\n",
    "Esta variable indica la *URL* del servidor local que estará siriviendo el contenido estático. Por defecto el valor de la variable es ```'/static/'```.\n",
    "\n",
    "Es importante que *Django* cuente con las credenciales y permisos para acceder a los recursos de esta *URL*."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### La variable ```settings.STATIC_ROOT```.\n",
    "\n",
    "Esta variable indica la localización de los contenidos estáticos, la variable ```settings.STATIC_ROOT``` define la ruta completa del directorio donde se encontrarán los recursos estáticos recolectados mediante la instrucción ```manage.py collectstatic```.\n",
    "\n",
    "Si el valor de ```settings.DEBUG``` es ```True```, *Django* no consultará este directorio.\n",
    "\n",
    "Este directorio es al que debe de apuntar el servidor web para la URL definida por ```settings.STATIC_URL```."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### La variable ```settings.STATICFILES_DIRS```.\n",
    "\n",
    "Esta variable contiene una lista de posibles rutas en las que se podría encontrar contenido estático al ejecutar la instrucción ```manage.py collectstatic```."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### La variable ```settings.STATICFILES_STORAGE```.\n",
    "\n",
    "Es común que al desplegar servicios en la nube se utilicen recursos de almacenamiento tales como [S3 de AWS](https://aws.amazon.com/es/s3/). \n",
    "\n",
    "La variable ```settings.STATICFILES_STORAGE``` permite definir el recurso en la nube en el cual se almacenará el contenido estático.\n",
    "\n",
    "Es posible consultar un pequeño ejemplo de conexiones de almacenamiento para contenido estártico en https://docs.djangoproject.com/en/3.0/howto/static-files/deployment/#staticfiles-from-cdn."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### La variable ```STATICFILES_FINDERS```.\n",
    "\n",
    "Esta variable define una lista de las herramientas de *Django* que son capaces de buscar contenido estático.\n",
    "\n",
    "Las herramientas predefinidas en una instalación de *Django* son:\n",
    "\n",
    "* ```'django.contrib.staticfiles.finders.FileSystemFinder'```.\n",
    "* ```'django.contrib.staticfiles.finders.AppDirectoriesFinder'```.\n",
    "\n",
    "En caso de que se defina una ubicación en la nube para guardar el contenido estático mediante ```settings.STATICFILES_STORAGE```, es necesario añadir ```'django.contrib.staticfiles.finders.DefaultStorageFinder'```. \n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Ejemplo:**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "El archivo ```src/19/settings.py``` contiene en su configuración las siguientes variables definidas:\n",
    "    \n",
    "``` python\n",
    "DEBUG = True\n",
    "STATIC_URL = '/static/'\n",
    "STATIC_ROOT = BASE_DIR + '/static/'\n",
    "STATICFILES_FINDERS = ['django.contrib.staticfiles.finders.FileSystemFinder',\n",
    "'django.contrib.staticfiles.finders.AppDirectoriesFinder',]\n",
    "```\n",
    "En vista de que la variable ```DEBUG``` tiene el valor de ```True```, *Django* buscará en el directorio  ```/static/``` de cada aplicación en el proyecto ```tutorial```."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* A continuación se sustituirá el archivo ```tutorial/tutorial/settings.py``` con el archivo ```src/19/settings.py```."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!cp src/19/settings.py tutorial/tutorial/settings.py"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!copy src\\19\\settings.py tutorial\\tutorial\\settings.py"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%pycat tutorial/tutorial/settings.py"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Se importará el archivo ```tutorial/tutorial/settings.py``` como un módulo."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from tutorial.tutorial import settings"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* El componente ```'django.contrib.staticfiles'``` se encuentra listado en ```settings.INSTALLED_APPS```."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "settings.INSTALLED_APPS"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "settings.STATIC_URL"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Aún cuando la configuración de ```settings.DEBUG``` indica que *Django* ignorará el contenido en ```STATIC_ROOT```, se ejecutará la instrucción ```manage.py collectstatic``` con fines ilustrativos."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "settings.DEBUG"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "La variable ```settings.STATIC_ROOT``` está configurada para usar la ruta completa del directorio ```tutorial/static```."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "settings.STATIC_ROOT"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%cd tutorial"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!tree static"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "!python manage.py collectstatic --noinput"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%cd .."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Contenido estáticos en plantillas de *Django*.\n",
    "\n",
    "### La declaración ```{% load % }```.\n",
    "\n",
    "La declaración ```{% load % }``` es usada por el *DTL* para cargar bibliotecas de etiquetas.\n",
    "\n",
    "```\n",
    "{% load <biblioteca> %}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Carga de la biblioteca ```static```.\n",
    "\n",
    "La biblioteca *static* hace referencia al contenido estático al que puede acceder *Django* mediante *django.contrib.staticfiles*.\n",
    "```\n",
    "{% load static %}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Accesso al contenido estático.\n",
    "\n",
    "Una vez cargada la biblioteca *static* es posible acceder al contenido estático dentro de una plantilla de la siguiente forma:\n",
    "\n",
    "\n",
    "```\n",
    "{% static \"<ruta del archivo>\" %}\n",
    "```\n",
    "\n",
    "* En donde ```<ruta del archivo>``` es la ruta dentro del directorio static en la que se encuentra el recurso."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Creación de una plantilla que incluye *Bootstrap* y una imagen de forma estática. \n",
    "\n",
    "### La biblioteca *Bootstrap*.\n",
    "\n",
    "[*Bootstrap*](https://getbootstrap.com/) es una de las bibliotecas basadas en *CSS* y *Javascript* más populares para crear sitios visualmente atractivos y responsivos.\n",
    "\n",
    "Aún cuando esta biblioteca puede ser referida mediante un *CDN* (por las siglas en inglés de red de contenido en línea), también es posible ponerla a disposición como contenido estático.\n",
    "\n",
    "Los directorios ```src/19/css``` y ```src/19/js``` contienen los archivos de la biblioteca de *Bootstrap*."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Se copiarán los directorios ```src/19/css``` y ```src/19/js``` al directorio estático de la aplicación ```api``."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Para GNU/Linux y MacOS X."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!mkdir tutorial/api/static"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!cp -r src/19/css tutorial/api/static/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!cp -r src/19/js tutorial/api/static/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!ls tutorial/api/static/"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Para Windows."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!mkdir tutorial\\api\\static"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!copy src\\19\\css tutorial\\api\\static\\"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!copy src\\19\\js tutorial\\api\\static\\"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!dir tutorial\\api\\static\\"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Inclusión  de un directorio de imágenes en el directorio estático.\n",
    "\n",
    "El directorio ```src/19/imagenes``` contiene a la imagen ```pythonista.png```.\n",
    "\n",
    "* A continuación se copiará el directorio *``src/19/imagenes``` al directorio estático de la aplicación ```api``."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!cp -r src/19/imagenes tutorial/api/static/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "! ls tutorial/api/static/imagenes/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!copy src\\19\\imagenes\\* tutorial\\api\\static\\imagenes\\"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!dir tutorial\\api\\static\\imagenes\\"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### La plantilla ```base.html```.\n",
    "\n",
    "La plantilla localizada en ```src/19/base.html``` contiene el siguiente código en el que se carga la biblioteca ```static``` y se hace referencia a *boostrap.min.css* y a la imagen ```pythonista.png```.\n",
    "\n",
    "``` html\n",
    "{% load static %} \n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "    <header>\n",
    "        <meta charset=\"UTF-8\">\n",
    "        <link href=\"{% static \"css/bootstrap.min.css\" %}\" rel=\"stylesheet\">\n",
    "        <title>\n",
    "            {% block encabezado %}\n",
    "                {{ titulo }}\n",
    "            {% endblock %}\n",
    "        </title>\n",
    "    </header>\n",
    "    <body>\n",
    "        <head>\n",
    "            <img src=\"{% static \"imagenes/pythonista.png\" %}\">\n",
    "        </head>\n",
    "        {% block cuerpo %}\n",
    "        <h1>¡Hola, {{nombre}}!</h1>\n",
    "        {% endblock %}\n",
    "    </body>\n",
    "</html>  \n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* A continuación se copiará el archivo  ```src/19/base.html``` al directorio ```tutorial/templates/```."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!cp src/19/base.html tutorial/templates/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!copy src\\19\\base.html tutorial\\templates\\"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "%pycat tutorial/templates/base.html"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Se iniciará el servidor. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%cd tutorial"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**ADVERTENCIAS:** \n",
    "\n",
    "* Al ejecutar la siguiente celda el servidor se inciará desde la notebook, por lo que para ejecutar cualquier otra celda es necesario interrumpir la ejecución del kernel.\n",
    "\n",
    "* Asegúrese que no haya otro servicio escuchando en el puerto ```8000```."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!./manage.py runserver 0.0.0.0:8000"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Ahora las plantillas correspondientes a las URLs siguientes despelgarán los cambios. \n",
    "\n",
    "http:https://localhost:8000/api/vista/\n",
    "\n",
    "http:https://localhost:8000/api/valida/"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p style=\"text-align: center\"><a rel=\"license\" href=\"http:https://creativecommons.org/licenses/by/4.0/\"><img alt=\"Licencia Creative Commons\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by/4.0/80x15.png\" /></a><br />Esta obra está bajo una <a rel=\"license\" href=\"http:https://creativecommons.org/licenses/by/4.0/\">Licencia Creative Commons Atribución 4.0 Internacional</a>.</p>\n",
    "<p style=\"text-align: center\">&copy; José Luis Chiquete Valdivieso. 2020.</p>"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "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.9.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}