Utilizamos cookies propias y de terceros para hacer funcionar y mejorar nuestros servicios. Si continúa navegando, consideramos que acepta su uso. Puede obtener más información visitando nuestra política de cookies.

Cerrar este mensaje

DJANGO - PERSONALIZAR APARIENCIA

En esta sesión ilustramos cómo personalizar el look and feel de una aplicación Django, usando el framework Bootstrap y demostrando cómo incluir y hacer referencia a los diferentes recursos estáticos requeridos, con algunos elementos de HTML5 de uso común en aplicaciones web para lograr una interfaz adaptable al dispositivo.

Cargando video...
¡Registrarse!

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Agregaremos un look and feel más adecuado para nuestra aplicación de ejemplo, utilizando el framework Bootstrap.

Incluiremos las referencias a recursos estaticos de estilos y archivos JS de la distribucion estandar de Bootstrap, y mostraremos brevemente el uso de clases y componentes comunes, además de organizar el menú de acciones de nuestra aplicación.

Código disponible en:
https://github.com/networkfaculty/Fundamentos-Django/releases/tag/d-2.3.6


Agregar archivos estáticos de Bootstrap y JQuery en:

curso/encuestas/static/encuestas/css/
curso/encuestas/static/encuestas/fonts/
curso/encuestas/static/encuestas/js/


curso/encuestas/static/encuestas/css/estilos-personalizados.css

html {
 position: relative;
 min-height: 100%;
}
body {
 margin-bottom: 60px;
}
body > .container {
 padding: 60px 15px 0;
}

.footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 60px;
 background-color: #f5f5f5;
}
.footer > .container {
 padding-right: 15px;
 padding-left: 15px;
 margin-top: 20px;
}


Personalizar plantillas para utilizar Bootstrap:

curso/encuestas/templates/encuestas/base.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="es">
 <head>
   <title>{{ titulo | default:"Encuestas" }}</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="{% static 'encuestas/css/bootstrap.min.css' %}" rel="stylesheet">
   <link href="{% static 'encuestas/css/estilos-personalizados.css' %}" rel="stylesheet">
   <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
   <![endif]-->
 </head>
 <body>
   <nav class="navbar navbar-inverse navbar-fixed-top">
       <div class="container">
           <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                       data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                   <span class="sr-only">Mostrar/ocultar navegación</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
               </button>
               <a class="navbar-brand" href="{% url 'encuestas:index' %}">Encuestas</a>
           </div>
           <div id="navbar" class="navbar-collapse collapse">
               {% block navegacion %}
               <ul class="nav navbar-nav">
                   {% block navegacion-elementos %}{% endblock %}
                   <li>
                       <a role="button" data-toggle="modal" data-target="#contacto">Contacto</a>
                   </li>
                   <li>
                       <a href="{% url 'admin:index' %}">
                           <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                           Usuarios y grupos
                       </a>
                   </li>
                   <li>
                       <a href="{% url 'curso-admin:index' %}">
                           <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                           Sitio administrativo
                       </a>
                   </li>
               </ul>
               {% endblock %}
           </div>
       </div>
   </nav>
   <div class="container">
       <div class="jumbotron">
           <img class="pull-right img-responsive" src="{% static 'encuestas/img/django-logo.png' %}" alt="Logo">
           {% block encabezado %}
           <h1>Encuestas</h1>
           <p>Aplicación de demostración en curso Fundamentos de Django</p>
           {% endblock %}
       </div>

       <section id="contenido">
           {% block contenido %}{% endblock %}
       </section>
       <section id="contacto" class="modal fade">
           <div class="modal-dialog">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal"
                               aria-label="Cerrar"><span aria-hidden="true">&times;</span></button>
                       <h2 class="modal-title">Contacto</h2>
                   </div>
                   <div class="modal-body">
                   {% include 'encuestas/direccion.html' %}
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                   </div>
               </div>
           </div>
       </section>
   </div>

   <footer class="footer">
       <div class="container">
           <p class="text-muted text-center">Pie de página</p>
       </div>
   </footer>

   <script src="{% static 'encuestas/js/jquery-1.11.3.min.js' %}"></script>
   <script src="{% static 'encuestas/js/bootstrap.min.js' %}"></script>
 </body>
</html>


curso/encuestas/templates/encuestas/detalle.html

{% extends 'encuestas/base.html' %}

{% block encabezado %}
<h1>Detalle de Encuesta: {{ pregunta.texto_pregunta|truncatewords:5|escape }}...</h1>
{% endblock encabezado %}

{% block contenido %}

{% if mensaje_error %}<p><strong>{{ mensaje_error }}</strong></p>{% endif %}

<div class="panel panel-primary">
   <div class="panel-heading">¡Participe!</div>
   <div class="panel-body">
       <h2>{{ pregunta.texto_pregunta|escape }}</h2>

       <form action="{% url 'encuestas:votar' pregunta.id %}" method="post">
           {% csrf_token %}
           {% for opcion in pregunta.opcion_set.all %}
               <div class="radio">
                   <label>
                       <input type="radio" name="opcion" id="opcion{{ forloop.counter }}"
                              value="{{ opcion.id }}">
                       {{ opcion.texto_opcion }}
                   </label>
               </div>
           {% endfor %}
           <button type="submit" class="btn btn-primary">Votar</button>
           <a class="btn btn-info" href="{% url 'encuestas:resultados' pregunta.id %}">
               Ver resultados
           </a>
       </form>
   </div>
</div>

{% endblock contenido %}

curso/encuestas/templates/encuestas/index.html

{% extends 'encuestas/base.html' %}

{% block contenido %}
{% autoescape on %}

{% if preguntas_recientes %}
   <h2>Encuestas recientes</h2>
   <ul class="list-group">
   {% for pregunta in preguntas_recientes %}
       <li class="list-group-item clearfix">
           {{ pregunta.texto_pregunta }}
           <div class="btn-group pull-right" role="group" aria-label="Acciones">
               <a class="btn btn-primary" role="button"
               href="{% url 'encuestas:detalle' pregunta.id %}">Votar</a>
               <a class="btn btn-info" role="button"
               href="{% url 'encuestas:resultados' pregunta.id %}">Ver resultados</a>
           </div>
       </li>
   {% endfor %}
   </ul>
{% else %}
   <p>No hay encuestas disponibles.</p>
{% endif %}

{% endautoescape %}
{% endblock contenido %}

curso/encuestas/templates/encuestas/resultados.html

{% extends 'encuestas/base.html' %}

{% block encabezado %}
<h1>Resultados de Encuesta: {{ pregunta.texto_pregunta|truncatewords:5|escape }}...</h1>
{% endblock encabezado %}

{% block contenido %}

<div class="panel panel-primary">
   <div class="panel-heading">Resultados</div>
   <div class="panel-body">
       <h2>{{ pregunta.texto_pregunta|escape }}</h2>

       <ul class="list-group">
       {% for opcion in pregunta.opcion_set.all %}
           <li class="list-group-item">
               <span class="badge">{{ opcion.votos }}</span>
               {{ opcion.texto_opcion }}</li>
       {% endfor %}
       </ul>
   </div>
</div>

<a class="btn btn-primary" href="{% url 'encuestas:detalle' pregunta.id %}">
   Votar
</a>

{% endblock contenido %}

Rating

Global

Ver video en playlist

comments powered by Disqus
Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.