path: root/files/es/learn/server-side/django/home_page/index.html

---
title: 'Tutorial de Django Parte 5: Creación de tu página de inicio'
slug: Learn/Server-side/Django/Home_page
translation_of: Learn/Server-side/Django/Home_page
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</div>

<p class="summary">Estamos listos ahora para añadir el código para mostrar nuestra primera página entera — una página de inicio del sitio web de la <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">BibliotecaLocal</a> que muestra cuántos registros tenemos de cada tipo de modelo y proporciona una barra lateral con enlaces de navegación a nuestras otras páginas. Por el camino ganaremos experiencia práctica en escritura básica de mapeos de URL y vistas, obtención de resgistros de la base de datos y uso de plantillas.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Pre-requisitos:</th>
   <td>Lee la <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Introducci%C3%B3n">Introducción a Django</a>. Completa los tópicos previos del tutorial (incluyendo <a href="https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>
    <p>Entender cómo crear mapas url y vistas simples (sin información codificada en la URL), y cómo obtener información desde los modelos y crear plantillas.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Visión_General">Visión General</h2>

<p>Ahora que hemos definindo nuestros modelos y hemos creado los primeros registros en la librería para trabajar, es hora de escribir código para presentar información a los usuarios. Lo primero que necesitamos es determinar que información queremos mostrar en nuestras páginas, y definir una URL apropiada hacia estos recursos. Vamos a necesitar crear el mapeador de URLs, las vistas y plantillas para mostrar estas páginas.</p>

<p>El siguiente diagrama es un recordatorio del principal flujo de datos y cosas necesarias para ser implementadas cuando se maneja una respuesta/petición en HTTP.<br>
 Los principales elementos que necesitamos crear son:</p>

<ul>
 <li>Mapeadores URL para reenviar las URLs admitidas (y cualquier información codificada en las URLs)  a las funciones de vista apropiadas.</li>
 <li>Funciones de vista para obtener los datos solicitados desde los modelos, crear una página HTML que muestre los datos, y devolverlo al usuario para que lo vea en el navegador.</li>
 <li>Plantillas usadas por las vistas para renderizar los datos.</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="display: block; margin: 0px auto;"></p>

<p>Como verás en la siguiente sección, vamos a tener 5 páginas para mostrar, que es mucho que documentar en un artículo. Por lo tanto, en la mayor parte de este artículo nos concentraremos en mostrar como implementar solo la página de inicio (nos moverermos a otras páginas en un artículo subsecuente). Esto debe darte un buen entendimiento de extremo a extremo sobre como los mapeadores URL, vistas y modelos funcionan en la práctica.</p>

<h2 id="Definiendo_el_recurso_URL">Definiendo el recurso URL</h2>

<p>Como esta versión de <em>LocalLibrary</em>  es escencialmente solo de lectura para usuarios finales, debemos proveer una página de llegada para el sitio (una página de inicio), y páginas que <em>desplieguen</em> listas y vistas detalladas para libros y autores. </p>

<p>Las URL que vamos a necesitar para nuestras páginas son:</p>

<ul>
 <li><code>catalog/</code> — La página home/index.</li>
 <li><code>catalog/books/</code> — La lista de todos los libros.</li>
 <li><code>catalog/authors/</code> — La lista de todos los autores.</li>
 <li><code>catalog/book/<em>&lt;id&gt;</em></code> — La vista detallada para el libro específico con un campo de clave primaria de <code><em>&lt;id&gt;</em></code> (el valor por defecto). Así por ejemplo, <code>/catalog/book/3</code>, para el tercer libro añadido.</li>
 <li><code>catalog/author/<em>&lt;id&gt;</em></code><em> </em>— La vista detallada para el autor específico con un campo de clave primaria llamada <em><code>&lt;id&gt;. </code></em>Así por ejemplo, <code>/catalog/author/11</code>, para el 11vo autor añadido.</li>
</ul>

<p>La tres primeras URLs son usadas para listar el índice, los libros y autores. Esto no codifica ninguna información adicional, y mientras los resultados retornados dependerán del contenido en la base de datos, las consultas que se ejecutan para obtener la información siempre serán las mismas.</p>

<p>En contraste las 2 URLs finales son usadas para mostrar información detallada sobre un libro o autor específico — estas codifican la identidad de los ítemes a mostrar en la URL (mostrado arriba como <code><em>&lt;id&gt;</em></code> ). El mapeador URL puede extraer la información codificada y pasársela a la vista, donde se detarminará que información extraer de la base de datos. Al codificar la información en nuestra URL solo necesitamos un mapeador de URL, una vista, y un plantilla para manejar cada libro (o autor). </p>

<div class="note">
<p><strong>Nota</strong>: Django te permite construir tus URLs  de cualquier forma que quieras — puedes codificar información en el cuerpo de la URL como se muestra arriba o usando la obtención de  parámetros <code>GET</code>  de la URL(e.j. <code>/book/?id=6</code>). Culquier enfoque que uses, las URLs deben mantenerse limpias, lógicas y legibles (<a href="https://www.w3.org/Provider/Style/URI">observa el consejo del W3C aquí</a>).<br>
 <br>
 La documentación Django tiende a recomendar la codificación de información en el cuerpo de la URL, una práctica que ellos creen que promueve mejores diseños de URL.</p>
</div>

<p>Como discutimos en la introducción, el resto de este articulo describe como construimos la página index.</p>

<h2 id="Creando_la_página_index">Creando la página index</h2>

<p>La primera página que crearemos será la página index (<code>catalog/</code>). Esto desplegará un pequeño HTML estático, junto con algunos "contadores" calculados de diferentes registros en la base de datos. Para hacer este trabajo tendremos que crear un mapeador URL, una vista y una plantilla. </p>

<div class="note">
<p><strong>Nota</strong>: Vale la pena prestar un poco de atención extra en esta sección. La mayoría del contenido es común para todas las páginas.</p>
</div>

<h3 id="Mapeador_URL">Mapeador URL</h3>

<p>Hemos creado un archivo básico <strong>/catalog/urls.py</strong> para nuestra aplicación catálogo cuando creamos el <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">esqueleto del sitio Web</a>. Las URLs de la aplicación catálogo fueron incluidas dentro del proyecto con un mapeador a <code>catalog/</code>, entonces las URLs  que llegan a este mapeador deben empezar con<code> catalog/</code> (el mapeador funciona sobre todos los string en la URL después de la barra diagonal).</p>

<p>Abra <strong>urls.py</strong> y pegue la línea en negrita que aparece a continuación. </p>

<pre class="brush: python">urlpatterns = [
<strong>    url(r'^$', views.index, name='index'),</strong>
]</pre>

<p>Esta función <code>url()</code> define un patrón URL (<code>r'^$'</code>),  y una función vista que será llamada si el patrón es detectado (<code>views.index</code> — una función llamada <code>index()</code> en <strong>views.py</strong>). El patrón URL es una <a href="https://docs.python.org/3/library/re.html">expresión regular de Python</a> (ER). Hablaremos un poco más sobre ERs más adelante en este tutorial, pero para este caso todo lo que necesitas saber es que en una ER de ^$  el patrón coincidirá con una cadena vacía  (^ es un marcador de inicio de cadena y  $ es un marcador de fin de cadena). </p>

<div class="note">
<p><strong>Nota: </strong>Nota que en  <strong>/locallibrary/locallibrary/urls.py</strong> </p>

<pre><code>urlpatterns += [
    url(r'^catalog/', include('catalog.urls')),
]</code></pre>

<p>La expresión regular en este caso no tienen un <code>$</code> (caracter asignado a fin-de-cadena) pero incluye una barra diagonal. Siempre cuando Django se encuentra con <code>include()</code> (<a href="https://docs.djangoproject.com/en/1.11/ref/urls/#django.conf.urls.include" title="django.conf.urls.include"><code>django.conf.urls.include()</code></a>), corta cualquier parte de la URL que coincida hasta este punto y envía el resto de la cadena para incluir la configuración URL para el siguiente procesamiento.</p>

<p>La URL coincidente es en realidad <code>catalog/</code> + &lt;cadena vacía&gt; ( <code>/catalog/</code> es asumida ya que include() fue el método usado). Nuestra primera función vista  será llamada si recibimos una consulta HTTP con una URL de <code>/catalog/</code>.</p>
</div>

<p>La función  <code>url()</code> también especifica un parámetro <code>name</code>, que identifica de manera única  <em>este</em> mapeador de URL particular. Puedes usar este nombre para "revertir" el mapeador — para crear dinámicamente una URL que apunta al el recurso que el mapeador esta diseñado para manejar. Por ejemplo, con esto hecho ahora podemos enlazar nuestra página inicio creando el siguiente enlace en nuestra plantilla:</p>

<pre class="brush: html">&lt;a href="<strong>{% url 'index' %}</strong>"&gt;Home&lt;/a&gt;.</pre>

<div class="note">
<p><strong>Nota</strong>: Por su puesto podemos codificar a fuerza bruta el link anterior (e.j. <code>&lt;a href="<strong>/catalog/</strong>"&gt;Home&lt;/a&gt;</code>), pero entonces si cambiamos el patrón para nuestra página de inicio (e.j. a <code>/catalog/index</code>) la plantilla no podrá seguir enlazando correctamente. Usar un mapeador de url es mucho más flexible y robusto!</p>
</div>

<h3 id="Vista_basada-en-funciones">Vista (basada-en-funciones)</h3>

<p>Una vista es una función que procesa una consulta HTTP, trae datos desde la base de datos cuando los necesita, genera una página HTML renderizando estos datos unando una plantilla HTML, y luego retorna el HTML en una respuesta HTTP para ser mostrada al usuario. La vista del índice sigue este modelo — extrae información sobre cuantos <code>Book</code>, <code>BookInstance</code>,  <code>BookInstance</code> disponibles y registros <code>Author</code> tenemos en la base de datos, y los pasa a una plantilla para mostrarlos.</p>

<p>Abre <strong>catalog/views.py</strong>, y nota que el archivo ya importa el atajo de la función <a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#django.shortcuts.render">render()</a> que genera archivos HTML usando una plantilla y datos. </p>

<pre class="brush: python">from django.shortcuts import render

# Create your views here.
</pre>

<p>Copia el siguiente código al final del archivo. La primera linea importa las clases de los modelos que usaremos para acceder a los datos en todas nuestras vistas.</p>

<pre class="brush: python">from .models import Book, Author, BookInstance, Genre

def index(request):
    """
    Función vista para la página inicio del sitio.
    """
    # Genera contadores de algunos de los objetos principales
    num_books=Book.objects.all().count()
    num_instances=BookInstance.objects.all().count()
    # Libros disponibles (status = 'a')
    num_instances_available=BookInstance.objects.filter(status__exact='a').count()
    num_authors=Author.objects.count()  # El 'all()' esta implícito por defecto.

    # Renderiza la plantilla HTML index.html con los datos en la variable contexto
    return render(
        request,
        'index.html',
        context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
    )</pre>

<p>La primera parte de la función vista extrae contadores de registros usando el atributo <code>objects.all()</code> en las clases del modelo. Tambien obtiene una lista de los objetos <code>BookInstance</code>  que tienen un valor del campo status de  'a' (Disponible). Puedes encontrar un poco más sobre cómo acceder desde modelos en nuestro tutorial previo (<a href="/en-US/docs/Learn/Server-side/Django/Models#Searching_for_records">Django Tutorial Part 3: Usando modelos &gt; Buscando registros</a>).</p>

<p>Al final de la función invocamos a la función <code>render()</code>  para crear y retornar una página  HTML como una respuesta (esta función atajo envuelve una serie, simplicando este caso de uso muy común). Esta recibe como parametros el objeto <code>request original</code> (una <code>ConsultaHttp</code>), una plantilla HTML con marcadores para los datos, y una variable de <code>contexto</code> (un diccionario Python que contiene los datos que serán insertados en esos marcadores). </p>

<p>Hablaremos más sobre la plantilla y la variable de contexto en la siguiente sección; vamos a crear nuestra plantilla para así de hecho mostrarle algo al usuario!</p>

<h3 id="Plantilla">Plantilla</h3>

<p>Una plantilla es un archivo de texto  que determina la estructura o diseño de un archivo (como una página HTML), con marcadores usados para representar el contenido real. Django automaticamente buscará plantillas en un directorio llamado '<strong>templates</strong>' de su aplicación. Así por ejemplo, en la vista índice que acabamos de agregar, la función <code>render()</code> esperará poder encontrar el archivo <strong>/locallibrary/catalog/templates/<em>index.html</em></strong>, y entregará un error si el archivo no puede ser encontrado. Puede ver esto si guarda los cambios anteriores y vuelve a su navegador — accediendo a <code>127.0.0.1:8000</code> ahora le entregará un mensaje de error bastante intuitivo "TemplateDoesNotExist at /catalog/", más otros detalles.</p>

<div class="note">
<p><strong>Nota</strong>: Django buscará en una serie de lugares por plantillas, basandose en su archivo de configuraciones de proyectos (buscar en su aplicación instalada es una configuración por defecto!). Puede encontrar más sobre como Django encuentra plantillas y qué formatos de plantillas soporta <a href="https://docs.djangoproject.com/en/1.10/topics/templates/">Templates</a> (Django docs).</p>
</div>

<h4 id="Plantillas_extendidas">Plantillas extendidas</h4>

<p>La plantilla índice va a necesitar marcado HTML estándar para la cabecera y el cuerpo, junto con secciones para navegar (a otras páginas en el sitio que todavía no hemos creado) y para mostrar algún texto introductorio y nuestros datos de libro. La mayoría de este texto (el HTML y la estructura de navegación) será el mismo para cada página en nuestro sitio. En lugar de obligar a los desarrolladores a duplicar este texto en cada página, el lenguaje de plantillas de Django le permite declarar una plantilla base y luego extenderla, reemplazando solo las porciones que son distintos para cada página específica. </p>

<p>Por ejemplo, un plantilla base <strong>base_generic.html</strong> podría verse como el texto de abajo. Como puedes ver, este contiene algo de HTML "común"  y secciones para el título, barra lateral, y contendio marcados usando las etiquetas de plantillas llamadas <code>block</code> y <code>endblock</code>  (mostradas en negrita). Los bloques pueden estar vacíos, o tener contenido que será usado "por defecto" para páginas derivadas.</p>

<div class="note">
<p><strong>Nota</strong>: Las etiquetas de plantilla son como funciones que puede usar en una plantilla para recorrer listas, realizar operaciones condicionales basadas en el valor de una variable, etc. Además de las etiquetas de plantilla, la sintaxis de plantilla te permite referenciar variables de plantilla (que son pasadas en la plantilla desde la vista)  y usar  <em>filtros de plantilla</em>, que reformatean las variables (por ejemplo, establecer una cadena en minúsculas).</p>
</div>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  <strong>{% block title %}</strong>&lt;title&gt;Local Library&lt;/title&gt;<strong>{% endblock %}</strong>
&lt;/head&gt;

&lt;body&gt;
  <strong>{% block sidebar %}</strong>&lt;!-- insert default navigation text for every page --&gt;<strong>{% endblock %}</strong>
  <strong>{% block content %}</strong>&lt;!-- default content text (typically empty) --&gt;<strong>{% endblock %}</strong>
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Cuando queremos definir una plantilla para una vista en particular, primero especificamos la plantila base  (con la etiqueta de plantilla  <code>extends</code> — vea el código siguiente). Si ahí hay alguna seccón que queremos reemplazar en la plantilla declaramos esto, usando secciones <code>block</code>/<code>endblock</code>  idénticas a las usadas en la plantilla base.</p>

<p>Por ejemplo, el fragmento de código que sigue muestra como usar la etiqueta de plantilla <code>extends</code>, y sobrescribe el bloque <code>content</code>. El HTML final producido tendrá todo el HTML y la estructura defininda en la plantilla base (incluyendo el contenido por defecto que ha definido dentro del bloque <code>title</code>), pero con tu nuevo bloque <code>content</code> insertado en lugar del que venía por defecto.</p>

<pre class="brush: html">{% extends "base_generic.html" %}

{% block content %}
&lt;h1&gt;Local Library Home&lt;/h1&gt;
&lt;p&gt;Welcome to &lt;em&gt;LocalLibrary&lt;/em&gt;, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.&lt;/p&gt;
{% endblock %}</pre>

<h4 id="La_plantilla_base_de_LocalLibrary">La plantilla base de LocalLibrary</h4>

<p>La plantilla base que pensamos usar para el siito web <em>LocalLibrary </em>se muestra abajo. Como puedes ver, contiene algo de HTML y bloques definidos para <code>title</code>, <code>sidebar</code> y <code>content</code>. Tenemos un título por defecto (que podríamos querer cambiar) y una barra lateral por defecto con enlaces a listas de todos los libros y autores (que probablemente no querramos cambiar, pero hemos dejado abierta la posibilidad de hacerlo si es necesario, poniéndolo en un bloque).</p>

<div class="note">
<p><strong>Nota</strong>: También introducimos dos etiquetas de plantilla adicionales: <code>url</code> y <code>load static</code>. Se discute sobre ellas en secciones posteriores.</p>
</div>

<p>Crea un nuevo archivo -- <strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong> -- y pon en él el siguiente contenido:</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

  {% block title %}&lt;title&gt;Local Library&lt;/title&gt;{% endblock %}
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;

  &lt;!-- Add additional CSS in static file --&gt;
  {% load static %}
  &lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;div class="container-fluid"&gt;

    &lt;div class="row"&gt;
      &lt;div class="col-sm-2"&gt;
      {% block sidebar %}
      &lt;ul class="sidebar-nav"&gt;
          &lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;All books&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;All authors&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
     {% endblock %}
      &lt;/div&gt;
      &lt;div class="col-sm-10 "&gt;
      {% block content %}{% endblock %}
      &lt;/div&gt;
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<p>La plantilla usa (e incluye) JavaScript y CSS desde <a href="http://getbootstrap.com/">Bootstrap</a> para mejorar el diseño y la presentación de la página HTML. Usar Bootstrap u otro framework web del lado del cliente es una manera rápida de crear una página atractiva que puede escalarse bien en diferentes tamaños de navegador, y también nos permite concentrarnos en la presentación de la página sin tener que entrar en ninguno de los detalles -- ¡queremos enfocarnos nada más en el código del lado del servidor aquí!</p>

<p>La plantilla base también hace referencia a un archivo css local (<strong>styles.css</strong>) que brinda algo más de estilo. Crea <strong>/locallibrary/catalog/static/css/styles.css</strong> y pon en él el siguiente contenido:</p>

<pre class="brush: css">.sidebar-nav {
    margin-top: 20px;
    padding: 0;
    list-style: none;
}</pre>

<h4 id="La_plantilla_index">La plantilla index</h4>

<p>Crea el archivo HTML <strong>/locallibrary/catalog/templates/<em>index.html</em></strong> y pon en él el contenido que se muestra abajo. Como puedes ver, extendemos nuestra plantilla base en la primera línea, y luego reemplazamos el bloque <code>content</code> por defecto con uno nuevo para esta plantilla.</p>

<pre class="brush: html">{% extends "base_generic.html" %}

{% block content %}
&lt;h1&gt;Local Library Home&lt;/h1&gt;

  &lt;p&gt;Welcome to &lt;em&gt;LocalLibrary&lt;/em&gt;, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.&lt;/p&gt;

&lt;h2&gt;Dynamic content&lt;/h2&gt;

  &lt;p&gt;The library has the following record counts:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;strong&gt;Books:&lt;/strong&gt; <strong>\{{ num_books }}</strong>&lt;/li&gt;
    &lt;li&gt;&lt;strong&gt;Copies:&lt;/strong&gt; <strong>\{{ num_instances }}</strong>&lt;/li&gt;
    &lt;li&gt;&lt;strong&gt;Copies available:&lt;/strong&gt; <strong>\{{ num_instances_available }}</strong>&lt;/li&gt;
    &lt;li&gt;&lt;strong&gt;Authors:&lt;/strong&gt; <strong>\{{ num_authors }}</strong>&lt;/li&gt;
  &lt;/ul&gt;

{% endblock %}</pre>

<p>En la sección <em>Dynamic content</em> hemos declarado marcadores de posición (<em>variables de plantilla</em>) para la información que quisimos incluir desde la vista. Las variables se marcan usando la sintaxis de "doble corchete" o "llaves" (ver lo que está en negrita arriba).</p>

<div class="note">
<p><strong>Nota:</strong> Puedes reconocer fácilmente si estás trabajando con variables de plantilla o con etiquetas de plantilla (funciones) porque las variables tienen llaves dobles (<code>\{{ num_books }}</code>) mientras que las etiquetas están encerradas entre llaves simples con signos de porcentaje (<code>{% extends "base_generic.html" %}</code>).</p>
</div>

<p>Lo importante de todo esto es que estas variables se nombran con las claves que enviamos dentro del diccionario <code>context</code> en la función <code>render()</code> de nuestra vista (mira abajo); estas variables serán reemplazadas por sus valores asociados cuando la plantilla sea renderizada.</p>

<pre class="brush: python">return render(
    request,
    'index.html',
     context={'<strong>num_books</strong>':num_books,'<strong>num_instances</strong>':num_instances,'<strong>num_instances_available</strong>':num_instances_available,'<strong>num_authors</strong>':num_authors},
)</pre>

<h4 id="Referenciando_archivos_estáticos_en_las_plantillas">Referenciando archivos estáticos en las plantillas</h4>

<p>Es probable que uses recursos estáticos en tu proyecto, incluyendo JavaScript, CSS e imágenes. Debido a que la ubicación de estos archivos podría ser desconocida (o podría cambiar), Django te permite especificar la ubicación de los mismos dentro de tus plantillas de forma relativa al parámetro global <code>STATIC_URL</code> (el sitio web esqueleto por defecto establece el valor de <code>STATIC_URL</code> a '<code>/static/</code>', pero puedes elegir alojar los archivos en una red de distribución de contenidos o en cualquier otro lugar).</p>

<p>Dentro de la plantilla, primero llamas a la etiqueta de plantilla <code>load</code> especificando "static" para añadir esta biblioteca de plantilla (como se muestra abajo). Luego de que static se carga, puedes usar la etiqueta de plantilla <code>static</code> especificando la URL relativa del archivo de interés.</p>

<pre class="brush: html"> &lt;!-- Add additional CSS in static file --&gt;
{% load static %}
&lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;</pre>

<p>Si quisieras podrías añadir una imagen a la página de forma similar. Por ejemplo:</p>

<pre class="brush: html">{% load static %}
&lt;img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="My image" style="width:555px;height:540px;"/&gt;
</pre>

<div class="note">
<p><strong>Nota:</strong> Los cambios de arriba especifican dónde se localizan los archivos, pero Django no los sirve por defecto. Si bien habilitamos este servicio para el servidor web de desarrollo en el mapeador URL global (<strong>/locallibrary/locallibrary/urls.py</strong>) cuando <a href="https://www.google.com/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwiq2o-V3PXbAhVM0FMKHcNzAkcQFggnMAA&amp;url=https%3A%2F%2Fdeveloper.mozilla.org%2Fes%2Fdocs%2FLearn%2FServer-side%2FDjango%2Fskeleton_website&amp;usg=AOvVaw2VIIkwGelK5OnECR-4u4sU">creamos el esqueleto del sitio web</a>, aún necesitarás configurar este servicio para producción. Hablaramos de esto más tarde.</p>
</div>

<p>Para mayor información sobre el trabajo con archivos estáticos revisa <a href="https://docs.djangoproject.com/en/1.10/howto/static-files/">Managing static files</a> (Django docs).</p>

<h4 id="Enlazando_con_URLs">Enlazando con URLs</h4>

<p>En la plantilla base de arriba se introdujo la etiqueta de plantilla <code>url</code>.</p>

<pre class="brush: python">&lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
</pre>

<p>Esta etiqueta toma el nombre de una función <code>url()</code> llamada en tu archivo <strong>urls.py,</strong> y valores para cualquier argumento que la vista asociada recibirá desde tal función, y devuelve una URL que puedes usar para enlazar con el recurso.</p>



<h4 id="Configurando_adonde_buscar_las_plantillas">Configurando adonde buscar las plantillas</h4>

<p>Para que Django encuentre los archivos de plantillas es necesario editar el archivo settings.py agregando el directorio donde creamos nuestras plantillas en el objeto TEMPLATES, como indica la linea en negrita a continuación:</p>

<pre class="brush: python">TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
<strong>            os.path.join(BASE_DIR, 'templates'),
</strong>        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]</pre>

<h2 id="¿Cómo_se_ve">¿Cómo se ve?</h2>

<p>En este punto deberíamos haber creado todo lo necesario para desplegar la página index. Corre el servidor (<code>python3 manage.py runserver</code>) y dirige tu navegador a <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>. Si todo se configuró correctamente, tu sitio debería verse similar a la siguiente captura de pantalla.</p>

<p><img alt="Index page for LocalLibrary website" src="https://mdn.mozillademos.org/files/14045/index_page_ok.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 874px;"></p>

<div class="note">
<p><strong>Nota:</strong> Aún no podrás usar los enlaces <strong>All books</strong> y <strong>All authors</strong> porque las URLs, vistas y plantillas para dichas páginas no se han definido (al momento solo hemos insertado marcadores de posición para esos enlaces en la plantilla <code>base_generic.html</code>).</p>
</div>

<h2 id="Rétate_a_tí_mismo">Rétate a tí mismo</h2>

<p>Aquí hay un par de tareas para probar tu familiaridad con consultas a modelos, vistas y plantillas.</p>

<ol>
 <li>Declara un nuevo bloque <em>title</em> en la plantilla <em>index</em> y cambia el título de la página para coincidir con esta página en particular.</li>
 <li>Modifica la vista para generar un conteo de géneros y otro de libros que contengan una palabra en particular (no sensible a mayúsculas y minúsculas) y luego añade estos campos a la plantilla.</li>
</ol>

<ul>
</ul>

<h2 id="Resumen">Resumen</h2>

<p>Hemos creado la página de inicio para nuestro sitio -- una página HTML que despliega algunos conteos de registros de la base de datos y contiene enlaces a otras de nuestras páginas que aún nos faltan por crear. Sobre la marcha hemos adquirido mucha información fundamental sobre mapeadores URL, vistas, consultas a la base de datos usando nuestros modelos, cómo enviar información a una plantilla desde nuestra vista, y cómo crear y extender plantillas.</p>

<p>En nuestro siguiente artículo nos basaremos en nuestro conocimiento para crear las otras cuatro páginas.</p>

<h2 id="Mira_también">Mira también</h2>

<ul>
 <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial03/">Escribiendo tu primera aplicación Django, parte 3: Vistas y Plantillas</a>  (Django docs)</li>
 <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/urls/">Despachador URL</a> (Django docs)</li>
 <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/views/">Funciones de vista</a> (DJango docs)</li>
 <li><a href="https://docs.djangoproject.com/en/1.10/topics/templates/">Plantillas</a> (Django docs)</li>
 <li><a href="https://docs.djangoproject.com/en/1.10/howto/static-files/">Administrando archivos estáticos</a> (Django docs)</li>
 <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#django.shortcuts.render">Funciones atajo de Django</a> (Django docs)</li>
</ul>

<p>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</p>



<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li>
 <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog"> </a></li>
</ul>