Django Guia Rapida IV - Agregar CSS, JS e imagenes

Esta entrada es continuacion de: Django Guia Rapida III - Pagina de inicio

En las entradas previas sobre Django empezamos con la creación de un proyecto web en Django, la web de una muebleria. En la ultima guia hicimos la pagina de inicio, una pagina extremadamente sencilla, sin estilos.
Ahora veremos como ponerle estilos css, imagenes y como agregar scripts js.

Recordaran que para crear la pagina de inicio trabajamos con vistas (plantillas html) y las guardamos en un directorio llamado templates. Si tienen experiencia en desarrollo web podran pensar que agregarle css, imagenes o js no es ningun misterio, podriamos simplemente crear un directorio llamado css dentro del directorio templates y guardar ahi los css y llamarlos desde nuestro index.html

Es lo clasico guardar archivos necesarios en una ruta relativa a nuestras paginas. Si lo intentaron se habran dado cuenta que en Django, por default, no trabaja así.
Hay que hacer una pequeña configuracion, veamosla.

Paso 1-
Los archivos css, js e imagenes son recursos estaticos de nuestra web, asi que vamos a definir de donde obtener archivos estaticos, abrimos el archivo de configuracion del proyecto:

/muebleria/muebleria/settings.py

Buscamos la linea STATICFILES_DIRS es un arreglo, a ese arreglo le agregamos os.path.join(PROJECT_ROOT, "static"), (PROJECT_ROOT se definicio en el paso 7 de la guia Django Guia Rapida III - Pagina de inicio), esa parte del archivo queda asi:

STATICFILES_DIRS = (
os.path.join(PROJECT_ROOT, "static"),
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
)

Paso 2-
Ahora en la carpeta del projecto creamos una carpeta llamada static y dentro de ella las carpetas css, js, y imgs, asi:

/
|- muebleria
|- static
|- css
|- imgs
|- js

Paso 3-
En la carpeta css creamos un archivo llamado basico.css y le ponemos el siguiente contenido (o algun otro de su diñeso):

body{
width:80%;
margin:0 auto;
}

header {
background-color:rgb(231,231,231);
padding: 1em;
border:ridge 3px silver;
margin:19px auto;
}

h1 {
text-align:center;
}

nav{
background-color:rgb(19,19,19);
color:white;
padding:0.5em 2em;
border:dashed 2px white;
margin:3px auto;
}

section#contenido{
width:88%;
margin:1em auto;
padding:0.6em 1.6em;
border:solid 1px rgb(209,209,210);
text-alig:justify;
}

footer#piepag{
padding: 1em;
text-align:center;
border-top:ridge 3px silver;
margin:1em auto;
text
}

Paso 5-
Ahora en nuestra vista base (index.html) debemos llamar a nuestra hoja de estilos recien creada, en la seccion head del html agregamos la linea:

<link href="/static/css/basico.css" rel="stylesheet" type="text/css">

Ahora si, al correr nuestro server y abrir nuestra pagina de inicio veremos nuestra pagina con un estilo basico, pero es mejor que nada :), con el ejemplo propuesto se ve asi:

En la carpeta imgs podemos poner imagenes y en nuestras vistas cargarlas usando el source src="/static/imgs/nombre_archivo", en la carpeta js podemos colocar nuestros scripts javascript y cargarlos usando el source src="/static/js/jquery_2.0.3.js", en el ejemplo es si quisieramos usar jquery, bueno se entiende la idea, asi podemos enriquecer el contenido de nuestra vista y darle forma y diseño.

Esta guia es corta, en la siguiente veremos como trabajar sesiones en django, crear un login con su logout.