Primeros pasos en Django III

Loaders o cargadores

Hasta ahora hemos cargado nuestra plantilla de forma ineficiente, ya que necesitamos especificar una dirección cada vez que
deseemos cargarla, con el comando open y close abrimos y cerramos un flujo de datos el cual consume muchos recursos.

Podríamos decir que en una pagina pequeña con pocas plantillas no hay problema de especificar una dirección, pero en un
proyecto mediano o grande puede haber cientos de plantillas, por otro lado, el consumo de recurso de los métodos open y
close podría ser insignificante en una web con poco transito, pero en una web grande, con cientos o miles de usuarios
realizando peticiones simultáneamente, se puede traducir en un sitio web lento.
Para usar cargadores lo primero que debemos hacer es ir al archivo “settings.py” en el cual encontramos
una lista llamada “TEMPLATES”. Dentro de este diccionario encontramos una tupla con la llave “DIRS” esta
tiene como valor una lista, en esta lista se especifica el directorio de las plantillas, como aun no la hemos
especificado la lista esta vacia
Colocaremos entre comillas la dirección de la carpeta donde se alojan nuestras plantillas, con esto le
indicamos a Django que nuestras plantillas se alojaran, se esta dirección.

Ahora debemos ir a la carpeta “views.py” e importar el cargador. Todo esta listo para usar el cargador,
sin embargo, aun los pasos para cargar una plantilla son los mismos, solo han cambiado un poco.
En la vista se comentaron las líneas de código que ya no harán falta, ya que al usar la línea
“doc_externor=loader.get_template” nos ahorramos el proceso de abrir leer, y cerrar y no es necesario volver a escribir la
dirección de la plantilla, solo debemos pasar el nombre de esta como parámetro a “get_template” y el cargador se
encargara del resto.

En este punto debemos explicar realizar una pequeña explicación, en este punto si intentamos acceder a la vista nos dará
error, esto se debe a que la instrucción “Template()” genera un objeto témplate diferente a la instrucción “loader”, ambos
son objetos témplate, pero son diferentes, la instrucción “Context()” genera un objeto tipo context que es compatible con el
objeto generado por “template()” pero no compatible con el objeto generador por “loader”
En este punto debemos explicar realizar una pequeña explicación, en este punto si intentamos acceder a la
vista nos dará error, esto se debe a que la instrucción “Template()” genera un objeto témplate diferente a la
instrucción “loader”, ambos son objetos de tipo témplate, pero son diferentes, ambos objetos tienen un
método “render” pero el render del objeto generador por “Template()” recibe un objeto tipo “context”
generado por “Context()”, pero el método “render” del objeto template generado por “loader” solo admite un
diccionario como contexto.

Lo que quiere decir que tampoco nos hace falta usar la línea “Context()” y podemos pasarle el diccionario
directamente al render. Ahora el cargue y renderización de nuestra plantilla se a reducido a solo dos líneas, y
las ventajas no son solo esas, la instrucción “loader” se ejecuta de manera diferente y es mucho mas
eficiente que el método “Template()”.
 Estructuras IF y filtros
Una vez culminada la explicación de como usar loader continuamos con con las
estructuras de control de flujo en el template, es turno de usar un condicional. Para
este ejemplo continuaremos usando la vista “tareasEnlistadas” que creamos en la ultima
clase
Estructuras IF

En el témplate que al que creamos para la vista de este ejemplo agregaremos un if,
observemos que al igual que el for todas las estructuras debe tener su finalización
{% endif %}. En este ejemplo colocamos un condicional que escribirá el ítem de la
lista de manera normal siempre que la tarea no sea “Aprender Django” cuando la tarea
sea esta, escribirá un ítem de lista con atributos CSS que harán que el color del
texto sea Rojo y el tamaño de letra sea mas grande
Observemos el resultado Obtenidos.
Es necesario tener en cuenta el MTV. No debemos excedernos en escribir código en la plantilla, ya que la filosofía de y
Django es mantener separados los módulos del sistema. La idea es, Intentar implementar la mayor parte de la lógica del
sistema en las vistas, y el código que se escriba en la plantilla sea una herramienta que ayude a mostrar la información.
Mas, sin embargo, nos encontraremos con escenarios donde nos veamos obligados a implementar algo de lógica en el
témplate.
Filtros

En Django tenemos un concepto llamado “Filtros” los filtros son instrucciones que nos permiten convertir los valores de las
variables. La sintaxis es la siguiente “{{variable|NombreDelFiltro}}”. No profundizaremos demasiado en los filtros que
podemos usar, la forma de usarlos es muy simple y son demasiados filtros. Así que continuando con la plantilla usaremos
algunos filtros como ejemplo
Upper: Transforma toda la cadena en mayúscula
lower: Es el inverso al upper convierte la cadena en minúscula.
wordcount: Cuenta la cantidad de palabras en la variable
First: Tomara sola mente la primera letra de la variable
También podemos usar mas de un filtro a la vez, en este ejemplo
usaremos “first” y “lower” para toma solamente la primera letra y
convertirla en minúscula.
Como podemos observar la utilización de filtros es bastante simple,
podemos investigar por nuestra cuenta sobre otros filtros en la
pagina oficial de Django en el siguiente enlace.
https://docs.djangoproject.com/es/3.2/ref/templates/builtins/
Plantillas Incrustadas

Cuando desarrollando un sitio web, siempre nos encontremos con secciones como el header o el fotter que
se repiten en todas las paginas del sitio. En un sitio pequeño de pocas paginas tal vez no haya problema en
simplemente copiar el código de una de estas estructuras y pegarlo en cada uno de las pagina, Pero
imaginemos el siguiente escenario:

Estamos desarrollando un sitio web con con 500 paginas, donde copiamos y pegamos el código de la
cabecera en esas 500 paginas y al terminar, el cliente nos indica que requiere cambiar el numero de teléfono
que aparece en el header, en si mismo, el cambiar el numero no supondría mucho problema, el problema
radica en que debemos cambiar el numero de teléfono en cada una de las paginas donde aparezca la
cabecera.
Para evitar este tipo de inconvenientes existe un método el cual consiste en incrustar una plantilla dentro de
otra. La idea es crear una plantilla que contenga el código para el Header y en cada pagina donde sea
necesario mostrar el header incrustaríamos la plantilla con el código de este. De esta manera solo seria
necesario realizar cambios en la plantilla con el código del header y este cambio se aplicaría en todas donde se
muestra.

Barra HTML

Plantilla HTML
Incluso podríamos insertar mas de una sección, permitiendo la creación
de varias secciones independiente y simplemente insertarlas en los
lugares que sean necesarias,

Barra HTML

Contenido

Plantilla HTML
La implementación de estas plantillas insertables es bastante mas sencilla de lo que a primer momento
podríamos pensar. Por ahora realizaremos un ejemplo bastante siempre solo para observar la
implementación. Primero crearemos una nueva plantilla llamada “cabecera.html”
En esta plantilla creamos etiqueta header y dentro de ella una nav que
contendrá una lista que simulará un menú de navegación. A esta lista
le daremos algunos estilos CSS bastante básicos.
Solo queda insertar nuestro simulacro de barra de navegación en una plantilla. Para este ejemplo usaremos la
plantilla de la vista “listado”, en el body de esta de esta plantilla escribiremos la siguiente instrucción
{% include "cabecera.html" %} y guardaremos los cambios.
Este seria nuestro resultado, ahora podríamos incrustar este “menú de navegación” en cualquiera plantilla
donde lo necesitemos y aunque tengamos 10.000 paginas con este menú solo debemos hacer cambio en la
plantilla “cabecera.html” y los cambios se aplicaran en todas las paginas.
Al inspeccionar la pagina en el navegador podemos observar que en el código HTML no hay rastro del
“include”
La herencia de plantillas complementa la inserción de plantillas, como su nombre lo indica se trata de
plantillas que hereda ciertas características de otra plantilla. Se logra declarando en la plantilla “padre” y en
esta plantilla padre declararemos secciones cambiantes.

Padre

Hijo 1 Hijo 2 Hijo 3

En este bloque cambiante integraremos todo el contenido particular de la pagina, y el resto será heredado del
padre, y al igual que en las plantillas incrustadas, si realizamos un cambio en la estructura del padre, este
cambio se aplicará a todos los hijos.

Realizaremos un ejemplo de la implementación de la herencia de plantilla. Debemos aclarar que el objetivo de

este ejemplo es aprender la metodología de la herencia de plantilla, el uso de HTML y CSS será muy básico y
simple.

Para comenzar reutilizaremos la plantilla “cabecera.html” la

cual utilizamos en el ejemplo de inserción de plantillas. Solo
retiraremos los estilos CSS que usamos en esta y nos
quedaremos solamente con la etiqueta header su
contenido.
Ahora crearemos una nueva plantilla llamada “footer.html” muy similar a la plantilla cabecera
Ahora viene lo nuevo, crearemos la plantilla “padre”. Esta será la plantilla de donde las plantilla hijas
heredaran la estructura base. Comenzaremos creando una plantilla llamada “base.html” con una
estructura básica HTML.
Ahora debemos identificar que será común para todas las paginas de nuestro sitio. Para este ejemplo
deseamos las que paginas tenga un header y un footer. Estas dos secciones se crearon anteriormente, así
que solo debemos insertarlas dentro del body de nuestra plantilla base
En el cuerpo de nuestras paginas a demás del header y footer, tendremos una sección, que
contendría un titulo, un subtitulo y un párrafo que nos indicara la fecha. Dejaremos
preparado la variable “{{fecha}}” para cuando creemos las vistas.
Ahora debemos identificar que contenido será independiente para cada pagina. Por ejemplo, el titulo, este es
independiente para cada una de las páginas en nuestro, entonces, indicaremos que el contenido de la
etiqueta <title> es un bloque cambiante usando la instrucción “{% block title %} {% endblock %}”. En breves
momentos incluir información en ese bloque.
Ahora, algo que también es independiente para cada pagina, es el contenido, el cual también agregaremos
dentro de la etiqueta <section>. Indicar que dentro de esta etiqueta también habrá contenido cambiante.
Similar al lo que hicimos con el titulo, agregaremos dentro de la etiqueta la instrucción “{% block content %}
{% endblock %}”.
Crearemos una nueva plantilla que se llamara “games.html”. La instrucción hará que esta plantilla herede la
estructura base de plantilla “base.html” es: “{% extends "base.html" %}”. con esta simple instrucción haremos
que una plantilla tome la estructura de la plantilla especificada.
Ahora solo nos falta indicar el titulo y el contenido que ira dentro de la sección cambiante. Comencemos
con el titulo, solo es necesario escribir la instrucción que escribimos dentro de la etiqueta <title> de la
pagina base, pero esta vez con el contenido que deseamos que se muestre
Para el contenido de la pagina es exactamente igual que con el titulo de la pagina, con la diferencia que,
dentro de esta sección cambiante, se mostrara un video cualquiera de YouTube y un titulo de este video que
nosotros colocaremos, solo como ejemplo se eligió un video del video juego Fornite.
insertar un video desde YouTube en cualquier pagina es muy simple, solo buscarnos el
video de deseamos insertar, oprimiremos “Compartir” elegimos la opción “insertar” y se
abrirá una ventana con una porción de código HTML, solo debemos copiar el código y
pegarlo en nuestro documento.
Solo resta crear la vista y la URL. Recordemos que en nuestra plantilla base dejamos preparada la variable
“fecha”, así que nuevamente con la clase “datetime” construiremos la fecha y hora, cargamos la plantilla
“games.html”, renderizamos la plantilla, pasamos el contexto y retornamos el “HttpResponse”.
Ahora solo debemos crear la URL para esta vista, importamos la vista “games”
y agregamos un nuevo path en la lista de las URL.
Al ingresar a la URL de la vista, nuestra pagina se
vera así ya que no hemos usado nada de CSS.

Aprovechemos esta ocasión para configurar la

dirección de los archivos estáticos y así agregar algo
de CSS a la pagina.

Primero Crearemos una nueva carpeta, esta puede

ser llamada como deseemos, pero para seguir las
convenciones de Django, la llamaremos “static”.
Dentro de esta carpeta crearemos dos nuevas
carpetas “css” y “img”.
Luego nos iremos al archivo “settings.py” en este
archivo buscaremos la variable “STATIC_URL” y
crearemos una nueva variable, esta nueva variable
será una lista llamada “STATICFILES_DIRS” y
dentro de el ir 2 valores [BASE_DIR / "static",’url
de la carpeta static’,].

BASE_DIR / "static“: indicamos en que parte de

directorio base donde guardaremos los archivos
estáticos
’url de la carpeta static’: indicamos la dirección de
la carpeta que creamos para guardar los archivos
estáticos”
La variable quedara como se muestra en la imagen. Debemos tener en cuenta, esta
configuración solo nos funcionara en el entorno de desarrollo de Django, para el momento
de culminar el proyecto la variable “STATICFILES_DIRS” debe ser igual a
”[ os.path.join(BASE_DIR,'static’),]”. Si deseos obtener mas información hacer de la
configuración en mismo archivo “settings.py” tenemos los enlaces que nos llevan a la
documentación oficial.
Una vez hecha esta configuración, crearemos dentro de la carpeta “css” nuestro archivo
“styles.css” y daremos algunos estilos básicos para la header, footer y la sección.
Ahora, para incluir estos archivos estáticos en nuestra plantilla
“base.html” primero debemos usar la instrucción “{% load static %}” antes de
intentar usar cualquier archivo estático, y siempre que queramos usar
especificar una ruta para un archivo estatico, ya sea una hoja de estilo,
una imagen o un archivo de js debemos especificar la URL de la siguiente
manera "{% static ’carpeta dentro de static/nombre del archivo' %}“. En este
a oportunidad deseamos especificar la ruta del documento “style.css” que se
encuentra dentro de la carpeta “css” href="{% static 'css/styles.css' %}"
Ahora esta seria nuestra pagina. Para evidenciar lo sencillo de implementar nuevas plantillas hijas, crearemos
dos paginas mas, una llamada de música y otra de tecnología
Copiamos y pegamos el código de la plantilla “games.html” en la plantilla “música.html”, cambiamos el titulo
de la pagina, el titulo del video y el video de YouTube. Y esta nueva plantilla ya esta lista, solo debemos crear
la vista y la URL.
Esta vista es similar a la vista “games” por lo tanto solo copiamos y pegamos el
mismo código, el único cambio es que esta vista cargara el témplate “música.html”.
Con la URL igual de simple, importamos la vista, y agregamos el path.
Y nuestra segunda pagina esta lista.
Para nuestra tercere pagina crearemos un témplate llamado “tecnologías.html” y repetiremos nuevamente los
pasos de nuestra pagina anterior.
Y así quedaría nuestra tercera pagina.
No cabe duda de que la inserción y herencia de plantilla son herramientas poderosas,
que nos permiten la reutilización de código y por consecuente la disminución en el
tiempo de desarrollo.