Tutorial de Django: Cómo usar Git y Bootstrap con Django.
Continuando con nuestro álbum de fotos, y ahora que el proyecto va tomando forma, es buena idea empezar a usar un control de versiones de forma que queden reflejados los cambios que vamos haciendo, así podremos recuperar el proyecto en un estado anterior y tendremos control sobre las fechas en que se hicieron modificaciones, entre otras cosas. Además, aunque en nuestro caso sólo trabajamos nosotros en el álbum, en caso de formar parte de un equipo de desarrollo tendríamos la posibilidad de trabajar de forma independiente sobre los mismos ficheros sin pisar el trabajo de nuestros compañeros.
Tenemos a nuestra disposición distintas herramientas que nos permiten trabajar de esta forma, en nuestro caso usaremos Git , así podemos trabajar en un repositorio propio y una vez tengamos los cambios hechos, hacer push de nuestro repositorio a un repositorio compartido.
Lo primero que vamos a hacer es crear un repositorio local , en el que incluiremos nuestro proyecto con el comando git init .
(tutorial)openwebinars@~/aplicaciones/myapps: git init Initialized empty Git repository in /home/jose/aplicaciones/myapps/.git/ (tutorial)openwebinars@~/aplicaciones/myapps:
Vemos que se ha creado un nuevo directorio .git .
Para ver el estado actual de nuestro repositorio usaremos git status ; es conveniente revisar el estado de nuestro proyecto para tener identificados qué ficheros se han añadido para la siguiente subida al repositorio común.
(tutorial)openwebinars@~/aplicaciones/myapps: git status En la rama master Commit inicial Archivos sin seguimiento: (use «git add <archivo>...» para incluir lo que se ha de ejecutar) .idea/ album/ db.sqlite3 manage.py media/ myapps/ templates/ no se ha agregado nada al commit pero existen archivos sin seguimiento (use «git add» para darle seguimiento) (tutorial)openwebinars@~/aplicaciones/myapps:
Se ha creado una rama de trabajo llamada master , además git ha identificado todos los archivos que forman nuestro proyecto y nos informa de que no se han incluido para el siguiente commit. Para incluir los archivos usaremos el comando git add <nombre> o git add . Para incluir todo, pero antes vamos a ver si queremos compartir todo lo que hay en el directorio, por ejemplo en nuestro proyecto tenemos muchos ficheros del tipo *.pyc que no queremos subir, tampoco queremos subir las fotos ni la base de datos, de esta forma al repositorio llegarán copias limpias de nuestro proyecto. Para descartar este tipo de ficheros usamos un archivo .gitignore en el que podemos decir qué debe dejar sin seguimiento.
(tutorial)openwebinars@~/aplicaciones/myapps: cat .gitignore *.jpg *.pyc .idea db.sqlite3 (tutorial)openwebinars@~/aplicaciones/myapps:
Si volvemos a consultar el estado
(tutorial)openwebinars@~/aplicaciones/myapps: git status En la rama master Commit inicial Archivos sin seguimiento: (use «git add <archivo>...» para incluir lo que se ha de ejecutar) .gitignore album/ manage.py myapps/ templates/ no se ha agregado nada al commit pero existen archivos sin seguimiento (use «git add» para darle seguimiento) (tutorial)openwebinars@~/aplicaciones/myapps:
Vemos que ya no está incluido el archivo db.sqlite3, tampoco estarán dentro de los directorios los ficheros .pyc y .jpg.
Ahora ya podemos decir a Git que inicie el seguimiento de los ficheros de nuestro proyecto.
(tutorial)openwebinars@~/aplicaciones/myapps: git add . (tutorial)openwebinars@~/aplicaciones/myapps: git status En la rama master Commit inicial Cambios para hacer commit: (use «git rm --cached <archivo>...« para eliminar stage) new file: .gitignore new file: album/__init__.py new file: album/admin.py new file: album/migrations/0001_initial.py new file: album/migrations/__init__.py new file: album/models.py new file: album/templates/album/category_detail.html new file: album/templates/album/category_list.html new file: album/templates/album/photo_confirm_delete.html new file: album/templates/album/photo_detail.html new file: album/templates/album/photo_form.html new file: album/templates/album/photo_list.html new file: album/tests.py new file: album/urls.py new file: album/views.py new file: manage.py new file: myapps/__init__.py new file: myapps/settings.py new file: myapps/urls.py new file: myapps/wsgi.py new file: templates/base.html (tutorial)openwebinars@~/aplicaciones/myapps:
Aquí podemos ver qué ficheros se han incluido en el primer commit que podemos ejecutar con el comando git commit -m "Initial commit" .
(tutorial)openwebinars@~/aplicaciones/myapps: git commit -m "Initial commit" [master (root-commit) e300e4a] Initial commit 21 files changed, 439 insertions(+) create mode 100644 .gitignore create mode 100644 album/__init__.py create mode 100644 album/admin.py create mode 100644 album/migrations/0001_initial.py create mode 100644 album/migrations/__init__.py create mode 100644 album/models.py create mode 100644 album/templates/album/category_detail.html create mode 100644 album/templates/album/category_list.html create mode 100644 album/templates/album/photo_confirm_delete.html create mode 100644 album/templates/album/photo_detail.html create mode 100644 album/templates/album/photo_form.html create mode 100644 album/templates/album/photo_list.html create mode 100644 album/tests.py create mode 100644 album/urls.py create mode 100644 album/views.py create mode 100755 manage.py create mode 100644 myapps/__init__.py create mode 100644 myapps/settings.py create mode 100644 myapps/urls.py create mode 100644 myapps/wsgi.py create mode 100644 templates/base.html (tutorial)openwebinars@~/aplicaciones/myapps:
Ahora que hemos hecho el primer commit en nuestro repositorio local podemos pasar nuestro proyecto a un repositorio compartido . En este capítulo usaremos GitHub para gestionar nuestro repositorio remoto. Una vez hayamos creado nuestra cuenta en GitHub veremos la opción Create Repository , nosotros lo hemos nombrado como my_album por lo que GitHub asigna la dirección https://github.com/ usuario /my_album.git, donde usuario será el nombre de usuario de nuestra cuenta GitHub. Con el siguiente comando podemos crear un repositorio remoto , que normalmente se llama origin , asociado a esta dirección.
(tutorial)openwebinars@~/aplicaciones/myapps: git remote add origin https://github.com/usuario/my_album.git (tutorial)openwebinars@~/aplicaciones/myapps:
Ya podemos enviar nuestro repositorio local al repositorio remoto , origin, que acabamos de crear.
(tutorial)openwebinars@~/aplicaciones/myapps: git push -u origin master Username for 'https://github.com': usuario Password for 'https://usuario@github.com': ******* Counting objects: 27, done. Delta compression using up to 2 threads. Compressing objects: 100% (23/23), done. Writing objects: 100% (27/27), 6.03 KiB | 0 bytes/s, done. Total 27 (delta 1), reused 0 (delta 0) To https://github.com/usuario/my_album.git * [new branch] master -> master Branch master set up to track remote branch master from origin. (tutorial)openwebinars@~/aplicaciones/myapps:
Con este comando estamos diciendo que pase el contenido de la rama local, que por defecto Git llama máster al repositorio origin que hemos creado, el parámetro -u le dice a Git que recuerde estos dos nombres, por lo que la próxima vez sólo tendremos que usar git push y ya sabrá que tiene que pasar el contenido de master a origin. Si volvemos a la dirección https://github.com/usuario/my_album.git veremos el contenido de nuestro proyecto.
Ahora que ya tenemos nuestro repositorio remoto, volvamos a trabajar sobre la copia local que tenemos.
Aunque en el capítulo anterior vimos cómo mejorar el aspecto de nuestra aplicación, en esta ocasión vamos a ir un paso más allá y vamos a usar Bootstrap , que aparte de ofrecernos un diseño preestablecido es web responsive , es decir veremos cómo podemos hacer que nuestra aplicación mantenga un buen aspecto independientemente del dispositivo que estemos usando para verla. Lo primero que tenemos que hacer es indicar a nuestra aplicación que tiene que cargar Bootstrap, para hacerlo podemos descargarlo e incluirlo en nuestro proyecto o simplemente referenciar al CDN , esto último es lo que haremos nosotros. Editamos el fichero ./templates/base.html para dejarlo de la siguiente forma.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Album</title>
<!-- CDN Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- NavBar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url "base" %}">Album</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="{% url "category-list" %}">Category<span class="sr-only">(current)</span></a></li>
<li><a href="{% url "photo-list" %}">Photo</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{% url "photo-create" %}">Upload</a></li>
<li class="divider"></li>
<li><a href="#">Log In</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
{% block section %}
{% endblock section %}
</div>
<div class="container">
{% block maincontent %}
{% endblock maincontent %}
</div>
</body>
</html>
También hemos añadido una barra de navegación como menú principal, que está bajo el comentario <!-- NavBar --> . Vemos que las etiquetas que estábamos usando hasta ahora tienen clases del tipo collapse o navbar-header , éstas son clases propias de Bootstrap . Si refrescamos nuestra aplicación en el navegador veremos que ha cambiado la fuente, el color del texto y nuestro menú principal.
Para ver con más detalle lo que nos ofrece Bootstrap vamos a construir nuestra plantilla de fotos ./album/templates/photo_list.html . Partimos de esta plantilla
{% extends 'base.html' %}
{% load static %}
{% block section %}
<h2>Photo</h2>
<hr>
{% endblock section %}
{% block maincontent %}
{{ object_list }}
{% endblock maincontent %}
y sobre ella vamos a incluir el sistema de grid de Bootstrap para dejarla así.
{% extends 'base.html' %}
{% load static %}
{% block section %}
<h2>Photo</h2>
<hr>
{% endblock section %}
{% block maincontent %}
<div class="row well">
<div class="col-md-6 well">
{{ object_list }}
</div>
</div>
{% endblock maincontent %}
Aquí lo importante está en las etiquetas div, vemos tres tipos de clases , row, col-md-6 y well.
- row: Siempre tiene que estar incluida en una clase container , en nuestro caso en ./templates/base.html. Se usa para organizar grupos de columnas .
- col-md-6: Con esta clase creamos una columna (col-) , adaptada a terminales medianos (col-md-) , de tamaño 6 (col-md-6) ; debemos saber que Bootstrap divide el terminal en doce unidades , por tanto nuestra columna ocupará la mitad del terminal siempre que este sea mediano o grande, en terminales pequeños como tablets o móviles ocupará el total del terminal. De igual forma podríamos incluir una columna de dos unidades, adaptada a terminales pequeños y separada una unidad del margen izquierdo agrupando las clases .col-xs-2 y .col-xs-offset-1 o usar columnas de tamaño 3 para terminales medianos y tamaño 7 para terminales pequeños agrupando .col-sm-7 .col-md-3
- well: Simplemente pone el fondo de nuestras etiquetas div en un tono más oscuro.
Para verlo en acción solo tenemos que refrescar la pantalla y veremos esto en nuestro portátil.
Vemos que la columna ocupa la mitad del espacio de la fila que la contiene, y nuestro menú aparece tal y como lo dejamos.
Esto sería lo que veríamos en un móvil
Ahora vemos que la columna ocupa todo el espacio dentro de la fila , además el menú ha cambiado, como no hay espacio suficiente para mostrar todas las opciones con claridad ahora aparece un desplegable a la derecha .
Con esto podemos dejar la lista de fotos de nuestro álbum de la siguiente forma.
{% extends 'base.html' %}
{% load static %}
{% block section %}
<h2>Photo</h2>
<hr>
{% endblock section %}
{% block maincontent %}
<div class="row well">
{% for p in object_list.all %}
<div class="col-md-4 well">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{ p.title }}</h3>
</div>
<div class="panel-body">
<a href="{% url "photo-detail" p.id %}">
<img src="{% static p.photo.url %}" style="width:200px;height:200px;"/>
</a>
</div>
<div class="panel-footer">
{% if p.comment %}
{{ p.comment }}
{% else %}
<a href="{% url "photo-update" p.id %}">edit comments</a>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock maincontent %}
Donde también hemos usado Panels , uno de los componentes de Bootstrap.
Como habéis podido ver, este framework nos está facilitando mucho las cosas y hay que tener en cuenta que lo que hemos visto es una mínima parte de lo que nos ofrece, os animo a que lo exploréis a fondo.
Con esto podemos ver los cambios que tiene Git identificados respecto a la última versión que tenemos en el repositorio local.
(tutorial)openwebinars@~/aplicaciones/myapps: git status En la rama master Your branch is up-to-date with 'origin/master'. Cambios no preparados para el commit: (use «git add <archivo>...» para actualizar lo que se ejecutará) (use «git checkout -- <archivo>...« para descartar cambios en le directorio de trabajo) modificado: album/templates/album/photo_list.html modificado: templates/base.html no hay cambios agregados al commit (use «git add» o «git commit -a») (tutorial)openwebinars@~/aplicaciones/myapps:
Los añadimos para el siguiente commit , hacemos commit y lo volcamos al repositorio remoto.
(tutorial)openwebinars@~/aplicaciones/myapps: git add . (tutorial)openwebinars@~/aplicaciones/myapps: git commit -m "Bootstrap" [master 77dadc0] Bootstrap 2 files changed, 75 insertions(+), 44 deletions(-) rewrite album/templates/album/photo_list.html (79%) (tutorial)openwebinars@~/aplicaciones/myapps: git push -u origin master Username for 'https://github.com': usuario Password for 'https://usuario@github.com': Counting objects: 15, done. Delta compression using up to 2 threads. Compressing objects: 100% (6/6), done. Writing objects: 100% (8/8), 1.45 KiB | 0 bytes/s, done. Total 8 (delta 4), reused 0 (delta 0) To https://github.com/usuario/my_album.git e300e4a..77dadc0 master -> master Branch master set up to track remote branch master from origin. (tutorial)openwebinars@~/aplicaciones/myapps:
y podemos ver los cambios incluidos en el repositorio remoto.
Hasta aquí hemos dado una vuelta por lo más básico de Bootstrap y Git, pero queda mucho para investigar y mejorar vuestro álbum experimentando.
En el siguiente post veremos cómo mejorarlo aun más usando el trabajo de la comunidad Django.
También te puede interesar...
