Herencia Formularios Contexto

Vazquez Cruz Lizbeth 12211480 -Programacin Web.
-Herencia de plantillas (Django)

-Formularios de HTML
-Contexto en Django
Herencia de Plantillas
Cmo reducimos la duplicacin y redundancia de las reas comunes de las pginas, como
por ejemplo, los paneles de navegacin?
Una forma clsica de solucionar este problema es usar includes, insertando dentro de las
pginas HTML a "incluir" una pgina dentro de otra. Es ms, Django admite esta
aproximacin, con la etiqueta {% include %} anteriormente descrita. Pero la mejor forma de
solucionar este problema con Django es usar una estrategia ms elegante llamada herencia
de plantillas.
En esencia, la herencia de plantillas te deja construir una plantilla base "esqueleto" que
contenga todas las partes comunes de tu sitio y definir "bloques" que los hijos puedan
sobrescribir. Este mtodo es bastante ms dinmico que el uso de la etiqueta include.
El sistema de herencia de Django soluciona estos problemas. Lo puedes pensar a esto como
la versin contraria a la del lado del servidor. En vez de definir los pedazos que son
comunes, defines los pedazos que son diferentes.
La herencia no afecta el funcionamiento del contexto, y puedes usar tantos niveles de
herencia como necesites. Una forma comn de utilizar la herencia es el siguiente enfoque de
tres niveles:
1. Crear una plantilla base.html que contenga el aspecto principal de tu sitio. Esto es lo
que rara vez cambiar, si es que alguna vez cambia.
2. Crear una plantilla base_SECTION.html para cada "seccin" de tu sitio (por ej.
base_photos.html y base_forum.html). Esas plantillas heredan de base.html e incluyen
secciones especficas de estilo/diseo.
3. Crear una plantilla individual para cada tipo de pgina, tales como pginas de
formulario o galera de fotos. Estas plantillas heredan de la plantilla de la seccin
apropiada.
Esta aproximacin maximiza la reutilizacin de cdigo y hace fcil el agregado de elementos
para compartir reas, como puede ser un navegador de seccin.
Aqu hay algunos consejos para el trabajo con herencia de plantillas:
Si usas {% extends %} en la plantilla, esta debe ser la primer etiqueta de esa plantilla.
En otro caso, la herencia no funcionar.
Generalmente, cuanto ms etiquetas {% block %} tengas en tus plantillas, mejor.
Recuerda, las plantillas hijas no tienen que definir todos los bloques del padre,
entonces puedes rellenar un nmero razonable de bloques por omisin, y luego definir
slo lo que necesiten las plantillas hijas. Es mejor tener ms conexiones que menos.
Si encuentras cdigo duplicado en un nmero de plantillas, esto probablemente
signifique que debes mover ese cdigo a un {% block %} en la plantilla padre.
Si necesitas obtener el contenido de un bloque desde la plantilla padre, la variable
{{ block.super }} har este truco. Esto es til si quieres agregar contenido del bloque
padre en vez de sobrescribirlo completamente.
No puedes definir mltiples etiquetas {% block %} con el mismo nombre en la misma
plantilla. Esta limitacin existe porque una etiqueta bloque trabaja en ambas

-Contexto en Django
direcciones. Esto es, una etiqueta bloque no slo provee un agujero a llenar, sino que
tambin define el contenido que llenar ese agujero en el padre. Si hay dos nombres
similares de etiquetas {% block %} en una plantilla, el padre de esta plantilla puede no
saber cul de los bloques usar.
El nombre de plantilla pasado a {% extends %} es cargado usando el mismo mtodo
que get_template(). Esto es, el nombre de la plantilla es agregado a la variable
TEMPLATE_DIRS.
En la mayora de los casos, el argumento para {% extends %} ser un string, pero
tambin puede ser una variable, si no sabes el nombre de la plantilla padre hasta la
ejecucin. Esto te permite hacer cosas divertidas, dinmicas.
Ejemplo:
Cdigo :
alberto@a-AMILO-Si-3655:~/django/tutorial/templates$ view
esqueleto.html
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
4
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
6 </head>
7 <body>
8
<h1>Usando herencia de plantillas</h1>
{% block content %}
10
11
12 </body>
<p>No hay contenido que mostrar</p>

{% endblock %}

-Contexto en Django
13 </html>
Lnea 5: tenemos una nueva etiqueta, {% block %}. Esto indica que aqu hay un
contenido que se debe modificar por la plantilla hija o se quedar vaco.
Lnea 9-12: tenemos otro bloque pero este va con contenido. Qu significa? Significa
que si no hay ningn hijo que lo sobrescriba se mostrara el contenido del padre. En este caso
si ahora viramos este html el titulo estara vaco pero se mostrara que no hay contenido
que
mostrar.
Tenemos la plantilla padre, vamos a crear al hijo. Modificamos por completo nuestro fichero
suma.html con el siguiente contenido:
Cdigo :
alberto@a-AMILO-Si-3655:~/django/tutorial/templates$ view suma.html

1 {% extends 'esqueleto.html' %}
2
3 {% block title %}Sumando digitos con django{% endblock %}
4
5 {% block content %}
6 La suma de los numeros es <b>{{ result }}</b>
7 {% endblock %}
Lnea 1: etiqueta que indica que esta plantilla hereda de esqueleto.html. Debe ser la
primera etiqueta si estamos creando una plantilla hija.
Lnea 3: sobrescribimos el bloque title de la plantilla padre
Lnea 5-7: sobrescribimos el bloque content de la plantilla padre. Eliminad estas lneas
y mirad lo que pasa.

-Contexto en Django
Abrid el navegador con la url http://127.0.0.1:8000/suma/40/60/.
Cosas que deberamos saber:

No se puede definir dos block con el mismo nombre en el mismo fichero. Esto es
lgico porque volveras loco a django y te devolver una excepcin TemplateSyntaxError

indicndote que el bloque X aparece ms de una vez en el fichero Y.
Podemos obtener el cdigo o contenido del bloque padre para no sobrescribirlo por
completo. Para recuperarlo tendremos que usar {{ block.super }}
Formularios HTML
Un formulario es una coleccin de campos que sabe cmo validarse a s mismo y mostrarse
como HTML.
Los formularios estn formados por determinados elementos como botones, cuadros de
texto, etc., dispuestos en un documento HTML. Si el usuario activa la pgina del documento,
se muestran los elementos del formulario. Entonces puede realizar las entradas o definir las
opciones. A travs de un botn Enviar puede transferirse los datos del formulario en el que
pueden introducirse el nombre del usuario y la direccin de correo electrnico.
En cuento el usuario enva los datos al servidor, estos pueden tratarse de la forma apropiada:
Los datos introducidos en el formulario pueden reenviarse a una direccin de correo
electrnico.
Los datos Introducidos pueden ser editados en el servidor mediante un script
CGI(Pearl, JavaScript, VBScript)
1El elemento <input>

El elemento <input> tiene nuevos valores para el atributo type.
Search: El elemento representa una caja de bsqueda. Los saltos de lnea son quitados
del valor ingresado pero no se modifica ninguna otra sintaxis.

-Contexto en Django
tel: El elemento representa un control para editar un nmero de telfono, porque los
nmeros telefnicos varan ampliamente en el mundo. Puedes usar atributos
como pattern y maxlength para restringir los valores ingresados en la caja.
url: El elemento representa un control para editar una URL. Se quitan los saltos de lnea y
espacios en blanco antes y despus del valor ingresado.
email: El elemento representa una direccin de correo electrnico. Los saltos de lnea se
quitan automticamente del valor ingresado. Puede ingresarse una direccin de correo no
vlida, pero el campo de ingreso slo funcionar si la direccin ingresada satisface la
produccin ABNF1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde atext est definida en
RFC 5322, seccin 3.2.3 y ldh-str est definida en RFC 1034, seccin 3.5.
Nota: si el atributo mltiple est agregado, pueden ingresarse muchas direcciones de correo
electrnico en ese campo <input>, como una lista separada por espacios, pero no est
implementado actualmente en Firefox.
El elemento <input> tambin tiene nuevos atributos:
list: El ID de un elemento <datalist> cuyo contenido, los elementos <option>, van a ser
usados como ayudas y sern mostrados como propuestas en el rea de sugerencias del
campo input.
pattern: Una expresin regular contra la que es verificado el valor del control, que
puede ser usada con valores de type de text, tel, search,url y email.
formmethod: Una cadena que indica qu mtodo HTTP (GET, POST, PUT o
DELETE) debe ser usado cuando se enva; sobrescribe el method del elemento <form>, si se
define. El formmethod slo se aplica cuando el type es image o submit, y, para los mtodos
PUT y DELETE, slo funcionar con un destino que est en el mismo dominio (poltica del
mismo origen).
2El elemento <form>

El elemento <form> tiene un nuevo atributo:
novalidate: Este atributo previene que el formulario sea validado antes del envo.
3El elemento <datalist>

El elemento <datalist> representa la lista de elementos <option> como sugerencias cuando
se llena un campo <input>.
Puedes usar el atributo list en un elemento <input> para enlazar a un campo de ingreso
especfico con un elemento <datalist> determinado.
<label>Superhroe favorito</label>
<input list="superheroes" name="list" />
<datalist id="superheroes">

-Contexto en Django
<option label="Iron Man" value="Iron Man">
<option label="The Hulk" value="The Hulk">
</datalist>
4El elemento <output>

El elemento <output> representa el resultado de un clculo.
Puedes usar el atributo for para especificar una relacin entre el elemento output y otros
elementos en el documento que afectan el clculo (por ejemplo, ingreso de datos o
parmetros). El valor del atributo for es una lista separada por espacios de IDs de otros
elementos.
5El atributo placeholder

El atributo placeholder en elementos <input> y <textarea> provee una ayuda a los usuarios
acerca de qu debe ser ingresado en el campo. El texto introducido en el placeholder no
debe contener enters o saltos de lnea.
<input type="email" id="user-email" placeholder="e.g. john.doe@mozilla.com" required/>

-Contexto en Django
6El atributo autofocus

El atributo autofocus te permite especificar que una parte del formulario debe tener foco
para ingresar informacin cuando se carga la pgina, a menos que el usuario lo cambie, por
ejemplo al escribir en otro lugar. Slo un elemento del formulario en un documento puede
tener el atributoautofocus, que es de tipo boolean. Este atributo puede ser aplicado a los
elementos <input>, <button>, <select> y <textarea>. La excepcin es que autofocus no
puede ser aplicado a un elemento <input> si el atributo type hidden est seleccionado (esto
quiere decir, no se puede enfocar automticamente un elemento escondido).
<input type="text" id="user" autofocus />
7La propiedad label.control del DOM
La interface HTMLLabelElement DOM brinda una propiedad extra, sumadas a las
propiedades que corresponden a los atributos del elemento<label> de HTML. La
propiedad control devuelve el controlador etiquetado, es decir el controlador para quien est
hecha la etiqueta, que est determinado por el atributo for (si est definido) o por el primer
elemento controlador descendiente.
8Validacin restringida
El HTML5 brinda sintaxis y elementos de API para posibilitar la validacin de formularios del
lado del cliente. Aunque esta funcionalidad no reemplaza la validacin del lado del servidor,
que todava es necesaria por seguridad e integridad de la informacin, la validacin del lado
del cliente puede brindar una experiencia de usuario mejor al darle al usuario una respuesta
inmediata acerca de la informacin ingresada.
Sintaxis de HTML para la validacin restringida
Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir datos en
el formulario.
El atributo required en los elementos <input>, <select> y <textarea> indica que se

debe ingresar algn dato. (En el elemento <input>,required slo se aplica con ciertos valores
del atributo type.)
El atributo pattern en el elemento <input> restringe el valor para que concuerde con
una expresin regular especfica.
Los atributos min y max del elemento <input> restringen los valores mximos y
mnimos que pueden ser ingresados.
El atributo step del elemento <input> (cuando se usa en combinacin con los
atributos min y max) restringe la granularidad de los valores ingresados. Un valor que no se
corresponda con un valor permitido no ser validado.
El atributo maxlength de los elementos <input> y <textarea> restringe el mximo
nmero de caracteres (en puntos de cdigo unicode) que el usuario puede ingresar.

-Contexto en Django
Los valores url y email para type restringen el valor para una URL o direccin de
correo vlida respectivamente.
Adems, puedes prevenir la validacin restringida especificando el atributo novalidate en el
elemento <form>, o el atributo formnovalidate en el elemento <button> y en el
elemento <input> (cuando type es submit o image). Estos atributos indican que el formulario
no ser validado cuando se envie.
API de validacin restringida
Las siguientes propiedades y mtodos del DOM relacionadas con la validacin restringida
estn disponibles para scripts del lado del cliente:
o
o
o
o
o
En objetos HTMLFormElement, el mtodo checkValidity(), que devuelve verdadero si

todos los elementos asociados del formulario que necesitan validacin satisfacen las
restricciones y falso si no lo hacen.
En elementos asociados al formulario:
la propiedad willValidate, que es falso si el elemento no satisface las
restricciones.
la propiedad validity, que es un objeto ValidityState que representa los estados
de validacin en que est el elemento (p.e., condiciones de restriccin que han fallado o
exitosas).
la propiedad validationMessage, que es un mensaje que contiene todas las
fallas en las restricciones que pertenecen a ese elemento.
el mtodo checkValidity(), que devuelve falso si el elemento falla en satisfacer
alguna de las restricciones o verdadero si pasa lo contrario.
el mtodo setCustomValidity(), que establece un mensaje de validacin
personalizado, permitiendo imponer y validad restricciones ms all de las que estn
predefinidas.
Formularios en Django.
Para el trabajo con enlaces y formularios presentes en un documento HTML, el modulo
lxml.html ofrece una serie de funciones adicionales que facilitan en gran medida el trabajo.
Ejemplos de ellos son aquellas funciones que nos permiten acceder a todos los elementos de
un formulario, las que nos devuelven el tipo de elemento input o las que nos permiten iterar
directamente por todos los enlaces presentes en el documento.
Para crear formularios se usa por convencin un archivo nuevo llamado: forms.py que se
ubicar en la carpeta de la aplicacin, esa misma donde se encuentran los
archivos:models.py y views.py. Sin embargo esto no es obligatorio, pueden crearse tambin
en el archivo models.py
Creamos nuestro archivo forms.py y en las primeras lneas ponemos:

-Contexto en Django
forms.py import
Estas lneas permitirn usar los elementos ya construidos (ModelForm para usar los modelos
ya declarados, forms para declarar nuevas reglas para un formulario y los modelos de
nuestra aplicacin principal)
Cuando Django fue lanzado al pblico por primera vez, posea un sistema de formularios
complicado y confuso. Como haca muy dificultosa la produccin de formularios, fue rescrito
y ahora se llama "newforms" (nuevos formularios). Sin embargo, como todava hay cierta
cantidad de cdigo que depende del "viejo" sistema de formularios, Django actualmente
viene con ambos paquetes.
from django import newforms as forms
En el momento de escribir ese libro, el viejo sistema de formularios de Django sigue

disponible como django.forms, y el nuevo paquete como django.newforms. En algn
momento esto va a cambiar, y django.forms har referencia al nuevo paquete de formularios.
Sin embargo, para estar seguros de que los ejemplos de este libro funcionen lo ms
ampliamente posible, todos harn referencia a django.newforms.
Un formulario de Django es una subclase de django.newforms.Form, tal como un modelo de
Django es una subclase de django.db.models.Model. El mdulo django.newforms tambin
contiene cierta cantidad de clases Field para los campos. Una lista completa de stas ltimas
se encuentra disponible en la documentacin de Django.
Nuestro ContactForm consiste de tres campos: un asunto (topic), que se puede elegir entre
tres opciones; un mensaje (message), que es un campo de caracteres; y un remitente
(sender), que es un campo de correo electrnico y es opcional (porque incluso los
comentarios annimos pueden ser tiles). Hay una cantidad de otros tipos de campos
disponibles, y puedes escribir nuevos tipos si ninguno cubre tus necesidades.
El objeto formulario sabe cmo hacer una cantidad de cosas tiles por s mismo. Puede
validar una coleccin de datos, puede generar sus propios "widgets" de HTML, puede
construir un conjunto de mensajes de error tiles. Y si no quieres disear el formulario a
mano, puede incluso renderizar el formulario entero.

-Contexto en Django

-Contexto en Django
Contexto.
Un contexto es simplemente un conjunto de variables y sus valores asociados. Una plantilla
usa estas variables para llenar y evaluar estas etiquetas de bloque.
Cuando una plantilla debe ser renderizada, necesita un contexto. Usualmente este contexto
es una instancia de django.template.Context, pero Django tambin provee una subclase
especial: django.template.RequestContext que acta de una manera levemente diferente.
RequestContext agrega muchas variables al contexto de nuestra plantilla cosas como el
objeto HttpRequest o informacin acerca del usuario que est siendo usado actualmente.
Un contexto es representado en Django por la clase Context, sta se encuentra en el mdulo
django.template. Su constructor toma un argumento opcional: un diccionario que mapea
nombres de variables con valores. Llama al mtodo render() del objeto Template con el
contexto para "llenar" la plantilla:
>>> from django.template import Context, Template
>>> t = Template("My name is {{ name }}.")
>>> c = Context({"name": "Stephane"})
>>> t.render(c)
'My name is Stephane.'
Los nombres de las variables deben comenzar con una letra (A-Z o a-z) y pueden contener
dgitos, guiones bajos y puntos. (Los puntos son un caso especial al que llegaremos en un
momento). Los nombres de variables son sensible a maysculas-minsculas.
>>> from django.template import Template, Context
>>> raw_template = """<p>Dear {{ person_name }},</p>...
... <p>Thanks for ordering {{ product }} from {{ company }}. It's scheduled
... to ship on {{ ship_date|date:"F j, Y" }}.</p>...
... {% if ordered_warranty %}
... <p>Your warranty information will be included in the packaging.</p>
... {% endif %}
...
... <p>Sincerely,<br />{{ company }}</p>"""
>>> t = Template(raw_template)
>>> import datetime
>>> c = Context({'person_name': 'John Smith',

-Contexto en Django
... 'product': 'Super Lawn Mower',
...
'company': 'Outdoor Equipment',
...
'ship_date': datetime.date(2009, 4, 2),
...
'ordered_warranty': True})
>>> t.render(c)
"<p>Dear John Smith,</p>\n\n<p>Thanks for ordering Super Lawn Mower from
Outdoor Equipment. It's scheduled \nto ship on April 2, 2009.</p>\n\n\n
<p>Your warranty information will be included in the packaging.</p>\n\n\n
<p>Sincerely,<br />Outdoor Equipment</p>"
Vamos paso a paso por este cdigo, de a una sentencia a la vez:
Primero, importamos la clase Template y Context, ambas se encuentran en el
mdulo django.template.
Guardamos en texto crudo de nuestra plantilla en la variable raw_template. Note que
usamos triple comillas para delimitar la cadena de caracteres, debido a que abarca
varias lneas; en el cdigo Python, las cadenas de caracteres delimitadas con una sola
comilla indican que no puede abarcar varias lneas.
Luego, creamos un objeto plantilla, t, pasndole raw_template al constructor de la
clase Template.
Importamos el mdulo datetime desde la librera estndar de Python, porque lo vamos
a necesitar en la prxima sentencia.

Entonces, creamos un objeto Context , c. El constructor de Context toma un
diccionario de Python, el cual mapea nombres de variables con valores. Aqu, por
ejemplo, especificamos que person_name es 'John Smith', product es'Super Lawn
Mower', y as sucesivamente.
Finalmente, llamamos al mtodo render() sobre nuestro objeto de plantilla, pasando a
ste el contexto. Este retorna la plantilla renderizada, esto es, reemplaza las variables de
la plantilla con los valores reales de las variables, y ejecuta cualquier bloque de
etiquetas.
Nota que el prrafo de garanta fue mostrado porque la variable ordered_warranty se
evala como True. Tambin nota que la fecha April 2, 2009, es mostrada acorde al
formato de cadena de caracteres F j, Y.
Estos son los fundamentos del uso del sistema de plantillas de Django: slo escribe una
plantilla, crea un objetoTemplate, crea un Context, y llama al mtodo render().

-Contexto en Django
Mltiples contextos, mismas plantillas

Una vez que tengas un objeto Template, puedes renderizarlo con mltiples contextos, por
ejemplo:
>>> from django.template import Template, Context
>>> t = Template('Hello, {{ name }}')
>>> print t.render(Context({'name': 'John'}))
Hello, John
>>> print t.render(Context({'name': 'Julie'}))
Hello, Julie
>>> print t.render(Context({'name': 'Pat'}))
Hello, Pat
Cuando ests usando la misma plantilla fuente para renderizar mltiples contextos como
este, es ms eficiente crear el objeto Template una sola vez y luego llamar a render() sobre
ste muchas veces:
# Bad
for name in ('John', 'Julie', 'Pat'):
t = Template('Hello, {{ name }}')
print t.render(Context({'name': name}))
# Good
t = Template('Hello, {{ name }}')
for name in ('John', 'Julie', 'Pat'):
print t.render(Context({'name': name}))
El anlisis sintctico de las plantillas de Django es bastante rpido. En segundo plano, la
mayora de los analizadores pasan con una simple llamada a una expresin regular corta.
Esto es un claro contraste con el motor de plantillas de XML, que incurre en la excesiva
actividad de un analizador XML, y tiende a ser rdenes de magnitud ms lento que el motor
de renderizado de Django.
2Bibliografa
ach4m0. (09 de Febrero de 2012). Cristalab. Obtenido de http://www.cristalab.com/tutoriales/python-

-Contexto en Django
en-la-web-con-django-iv-uso-de-plantillas-c103814l/
teoli, prieto.any, deibyod, Ces, hugohabel, deimidis. (20 de Octubre de 2013). MDN-Mozilla. Obtenido
de https://developer.mozilla.org/es/docs/HTML/HTML5/Forms_in_HTML5

Herencia Formularios Contexto

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Herencia Formularios Contexto

Uploaded by

Copyright:

Available Formats

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

-Herencia de plantillas (Django)

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

<title>{% block title %}{% endblock %}</title>

<h1>Usando herencia de plantillas</h1>

<p>No hay contenido que mostrar</p>

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

alberto@a-AMILO-Si-3655:~/django/tutorial/templates$ view suma.html

Lnea 3: sobrescribimos el bloque title de la plantilla padre

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

Cosas que deberamos saber:

lgico porque volveras loco a django y te devolver una excepcin TemplateSyntaxError

completo. Para recuperarlo tendremos que usar {{ block.super }}

1El elemento <input>

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

2El elemento <form>

3El elemento <datalist>

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

4El elemento <output>

5El atributo placeholder

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

6El atributo autofocus

El atributo required en los elementos <input>, <select> y <textarea> indica que se

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

En objetos HTMLFormElement, el mtodo checkValidity(), que devuelve verdadero si

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

En el momento de escribir ese libro, el viejo sistema de formularios de Django sigue

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

'company': 'Outdoor Equipment',

'ship_date': datetime.date(2009, 4, 2),

Primero, importamos la clase Template y Context, ambas se encuentran en el

a necesitar en la prxima sentencia.

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

Mltiples contextos, mismas plantillas

Vazquez Cruz Lizbeth 12211480 -Programacin Web.

You might also like