Bienvenidos un día más al curso de Python. En este capítulo vamos a mejorar el aspecto de nuestra aplicación. Ya que el aspecto que nos proporciona el framework Django, puede que no resulte muy atractivo de cara al usuario. Así que pongámonos manos a la obra.
Normalmente en las aplicaciones web aparte del código HTML que creamos, solemos necesitar archivos adicionales como pueden ser: imágenes, JavaScript, CSS, etc. En Django nos referimos a estos archivos como static files (archivos estáticos).
Para proyectos pequeños esto no es un gran problema, ya que mantenemos los archivos estáticos en carpetas que el servidor web puede utilizar. Sin embargo, en proyectos grandes, sobre todo en los que se componen de varias aplicaciones, utilizar múltiples conjuntos de archivos estáticos que son provistos por cada aplicación puede volverse muy complicado. Para esto está “Django.contrib.staticfiles”: reúne los archivos estáticos de cada una de nuestras aplicaciones en una única ubicación que pueda ser fácilmente desplegados en producción.
Personalizando el «look and feel» de nuestra app
Lo primero que vamos hacer es crear un directorio llamado “static” dentro nuestro directorio “polls”. En esta carpeta es donde “Django” va a buscar archivos estáticos, de forma similar a como hacia “Django” para las plantillas, ya que si recordáis de capítulos anteriores “Django” busca por “templates” dentro de “polls/templates/” para encontrar nuestras plantillas.
La configuración de “Django” contiene una variable llamada “STATICFILES_FINDERS” que guarda una lista de los “finders” (buscadores) que saben cómo encontrar los archivos estáticos en las distintas fuentes. Uno de los habilitados por defecto es “AppDirectoriesFinder” que busca un subdirectorio “static” en cada una de las “INSTALLED_APPS”, como la aplicación “polls” que hemos creado. El sitio de administrador usa la misma estructura de directorios para sus archivos estáticos.
Dentro del directorio “static” que hemos creado, creamos otro directorio llamado “polls” y dentro del mismo, un archivo llamado “style.css”. En otras palabras, nuestra hoja de estilos estaría en “polls/static/polls/style.css”. Por cómo funciona “AppDirectoriesFinder”, nos podemos referir a este archivo estático en “Django” simplemente como “polls/style.css”, de forma similar a como referenciábamos nuestras plantillas.
Espacio de nombres de archivos estáticos
Como con las plantillas, podríamos poner todos nuestros archivos estáticos directamente en “polls/static” (en lugar de crear un subdirectorio “polls”), pero esto no sería una buena práctica. Esto es debido a que “Django” va a elegir el primer archivo estático que encuentre cuyo nombre coincida, y si tuviéramos un archivo del mismo nombre en otra aplicación diferente, “Django” no podría distinguir entre ellos. Por lo que es necesario indicar a “Django” cuál es el correcto, y la forma más sencilla de hacerlo es utilizando los espacios de nombres como hicimos con las plantillas. Como sabéis esto es tan sencillo como poner los archivos estáticos en otro directorio que se llame como la aplicación a la que pertenecen.
Pongamos el siguiente código en la hoja de estilos (“polls/static/polls/style.css”):
polls/static/polls/style.css
li a {
color: green;
}
Después de realizar esto, nos dirigimos a “polls/templates/polls/index.html” y agregamos al principio del fichero:
polls/templates/polls/index.html
{% load staticfiles %}
“{% load staticfiles %}” carga la etiqueta “{% static %}” de la librería “staticfiles”. La etiqueta “{% static %}” genera las URL absolutas del archivo estático.
Y esto sería todo lo que necesitamos para seguir desarrollando. Ahora recargamos nuestra aplicación (http://localhost:8000/polls/) y deberíamos ver que los links a las preguntas son verdes (“Django” style!), lo que significa que la hoja de estilos se cargó correctamente.
Agregando una imagen de fondo
A continuación, vamos a crear un subdirectorio para imágenes. Creamos el subdirectorio “images” en el directorio “polls/static/polls/”. Dentro de ese directorio ponemos una imagen llamada “background.gif”. En otras palabras, ponemos nuestra imagen en “polls/static/polls/images/background.gif”.
Luego agreguemos a nuestra hoja de estilos (polls/static/polls/style.css) el siguiente código:
polls/static/polls/style.css
body {
background: white url("images/background.gif") no-repeat right bottom;
}
Volvemos a recargar la aplicación y deberíamos ver la imagen de fondo cargada en la esquina inferior derecha de la pantalla.
Por supuesto que la etiqueta “{% static %}” no está disponible para usar en los archivos estáticos ya que las hojas de estilo no son generadas por Django. Os recomendamos que siempre uséis rutas relativas para referenciar los archivos estáticos entre sí, porque de este modo uno puede cambiar la opción “STATIC_URL” (usado por la etiqueta “static” para generar las URLs), sin tener que modificar también una gran cantidad de rutas en nuestros archivos estáticos.
Os hemos presentado los conceptos básicos de como podéis modificar el aspecto de vuestra aplicación. Para más detalles sobre las opciones y otros aspectos incluidos en el framework, os recomendamos que os leáis “Managing static files” y “The staticfiles app”. También os recomendamos leer “Deploying static” files ya que explica cómo se usan los archivos estáticos en un servidor real.
Aquí lo dejamos por hoy, os invitamos como siempre a que sigáis explorando este framework y probando. En el próximo capítulo os explicaremos cómo se crean las aplicaciones para que puedan ser reutilizadas.
Y para todos los que se acaban de incorporar indicarles que tenemos un índice con todos los capítulos del curso, ya que nunca es tarde para empezar.
