Capítulo 3
Herramientas de desarrollo.
3.1. Introducción: entorno de desarrollo.
En este capítulo se verá una introducción a las principales herramientas utilizadas en el proyec-
to. El capítulo es fundamental para la compresión del capítulo 4 donde se explica la solución
adoptada para el desarrollo de la aplicación.
En primer lugar se detallan las características del entorno de desarrollo bajo el cual se ha
programado y probado la aplicación Web desarrollada. Así, veremos qué aplicaciones se han
requerido para el desarrollo de la misma y las versiones utilizadas de estas herramientas de
trabajo.
Se impone como requisito utilizar Django como framework para el desarrollo de la aplicación.
• Sistema operativo Linux: se ha trabajado con el sistema operativo Ubuntu en su versión
10,04 LTS Lucid Lynx publicada en abril de 2010.
• Python: al ser un framework escrito en Python, Django requiere la instalación del paquete
Python para su funcionamiento. La versión utilizada es la versión 2.6.5 lanzada en abril
de 2010.
• Django: framework bajo el que se desarrolla la aplicación Web. La versión utilizada es
la 1.1.1.
• django-staticfiles: paquete de Django para el manejo de archivos estáticos, necesarios
para el proceso de subida de archivos al servidor.
29
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
• MySQL: al disponer de modelos en nuestra aplicación, necesitaremos hacer uso de una
base de datos. En este caso se ha utilizado MySQL como motor de base de datos. Por
ello se han tenido que instalar los paquete mysql-server y mysql-client en sus versiones
5.1.
• FFmpeg: como herramienta para conversión de formatos de vídeos se ha utilizado el
software FFmpeg, que permite realizar estas operaciones mediante el uso de líneas de
comandos. La versión de este programa es la 0.6.3.
• Librerías para FFmpeg: ha sido necesario instalar algunas librerías adicionales para poder
realizar la conversión a los formatos de vídeos que se desean. Las librerías que se han
requerido han sido las siguientes:
◦ x264: para poder codificar vídeos con el codec H.264.
◦ libvpx: utilizada para poder codificar y decodificar vídeos VP8.
◦ libtheora: utilizada para codificar vídeos con el codec Theora.
3.2. El estándar HTML 5.
HTML 5 es la quinta revisión del lenguaje básico de la WWW (World Wide Web), HTML
(HyperText Markup Language). El desarrollo de este código es regulado por el W3C (World
Wide Web Consortium). Actualmente se encuentra todavía en fase de desarrollo, sin embargo,
muchos de los navegadores ya han comenzado ha incluir soporte nativo para algunas de las
nuevas características de este lenguaje.
3.2.1. Antecedentes.
HTML es un lenguaje de marcado cuyo origen se encuentra en el año 1989 y que se diseñó para
crear páginas Web. Desde su aparición ha ido evolucionando para adaptarse a los nuevos avan-
ces en las comunicaciones de Internet, centrándose sobre todo en la mejora del procesamiento
de información. Así, fueron apareciendo posteriormente nuevas revisiones que ampliaron este
lenguaje.
En 1991, el físico Tim Berners-Lee, publicó un documento en Internet, llamado HTML tags
donde hacía una descripción de este nuevo lenguaje.
30
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
En 1993, se intenta proponer como estándar oficial este lenguaje, pero no es hasta 1995
cuando un grupo de trabajo organizado por el organismo IETF (Internet Engineering Task
Force) consigue publicar el estándar HTML 2.0, siendo este el primer estándar oficial del
lenguaje.
En 1997 se publica la versión HTML 3.2, la cual es la primera recomendación publicada por
el organismo de estandarización llamado W3C.
HTML 4.0 fue publicado en 1998 y supuso un gran salto respecto a versiones anteriores. En
este estándar se incorporan la posibilidad de incluir scripts en las páginas Web, hojas de estilo,
entre otras nuevas características.
Más tarde, en 1999 se publica una revisión y actualización de la versión 4.0, es la especificación
HTML 4.01. A partir de este momento, el W3C se centró en el desarrollo del estándar XHTML
(eXtensible HyperText Markup Language), parando el desarrollo del HTML. Por este motivo,
las empresas Apple, Mozilla y Opera organizaron una nueva asociación llamada Web Hypertext
Apllication Technology Working Group (WHATWG). Actualmente esta asociación se encuentra
desarrollando el futuro estándar HTML 5, cuyo primer borrador oficial fue publicado en enero
de 2008.
Debido al éxito de la asociación WHATWG, en 2007 el W3C reconoció el trabajo de de este
grupo y lo tomó como base para su propia actividad con el fin de proponer una actualización
del estándar básico de la Web. Además, por su parte, continuó con el desarrollo de XHTML,
del cual publicaron la primera revisión en enero del año 2000. También ha sido publicado el
borrador de XHTML 2.0, que supondrá un cambio muy importante respecto de las anteriores
versiones de XHTML. Según la organización WHATWG, se prevé que el estándar HMLT 5
esté listo para el año 2012.
HTML 5 pretende ser un marco estable para el desarrollo de páginas Web. Además aboga por
los estándares abiertos, que son fundamentales para impulsar la innovación e introducir en la
sociedad los beneficios de las nuevas tecnologías. HTML 5 debe cumplir con su promesa de
favorecer un navegador estándar, abierto y único. Esta debe ser la preocupación principal, más
allá del dilatado debate, quizás excesivo, que se ha generado en torno a la reproducción de
vídeo y la lucha entre los códecs.
3.2.2. Necesidad de HTML 5.
Aunque el lenguaje básico de las Web es HTML, en realidad, una página Web utiliza diferentes
tecnologías que operan entre sí. Estas son tecnologías como CSS (Cascading Style Sheets) para
31
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
definir el diseño de la página, Javascript para ejecutar scripts en el lado del cliente, Flash para
incluir contenido multimedia, entre otras. Para poder hacer uso de estas tecnologías se han ido
creando etiquetas, las cuales no han sido normalizadas por ningún organismo regularizador.
Más de 10 años después de la aparición del último estándar de HTML, resulta imprescin-
dible la creación de una nueva especificación de HMTL que recoja las necesidades que los
desarrolladores han ido creando a lo largo de todo este tiempo.
La cuestión ahora es, por qué ha pasado tanto tiempo sin publicarse una nueva versión de este
lenguaje, conforme ha evolucionado las aplicaciones Web y las conexiones de banda ancha;
este hecho parece inexplicable. Pues bien, la cuestión es que detrás del desarrollo de HTML
5 existen muchas personas, empresas e instituciones implicadas. Es importante por tanto,
coordinar a todos estos organismos y crear un lenguaje conforme con todos para asegurar el
éxito del estándar.
3.2.3. Novedades HTML 5.
Algo que debemos tener en cuenta al utilizar la última revisión de HTML es que al estar
aún en desarrollo tendremos que tener presente que es posible que algunas de sus etiquetas o
APIs (Application Programming Interface) que sean necesarias usar, puede que aún no estén
soportadas en todos los navegadores Web.
Es importante tener en cuenta que no se puede decir que un navegador concreto sea compatible
o no con HTML 5. La especificación HTML 5 es una colección de características individuales,
por lo que no tiene sentido decir que tal navegador lo soporta o no. Lo que nos encontraremos
será que dicho navegador soportará y será compatible con ciertos de los nuevos elementos
que añade HTML 5 y con otros en cambio no. Además, esto no es todo, ya que aparte de
los nuevos elementos que incorpora HTML 5, también hay que tener en cuenta las nuevas
APIs que se están implementando y dentro de éstas, los navegadores implementarán ciertas
funciones sí y otras no.
Otra característica importante de HTML 5 es que es totalmente compatible con su versión
anterior HTML 4. HTML 5 por tanto, cuenta con todas las ventajas de HTML 4 además de
las nuevas que incorpora.
En cambio, los navegadores más populares ya presentan un alto grado de compatibilidad con
HTML 5. Navegadores como Firefox, Safari, Chrome, Opera y algunos navegadores móviles
ya presentan apoyo al nuevo elemento video, o a las novedades en cuanto a geolocalización
32
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
o almacenamiento local entre muchas más. Google ya es compatible con las anotaciones
de microdatos. Incluso Microsoft, cuyo punto más débil es precisamente el soporte a los
estándares, va a apoyar la mayoría de características de HTML 5 en su versión 9 de Internet
Explorer.
Crear o actualizar un documento HTML a su última versión es tan sencillo como lo es cambiar
el tipo de documento, es decir, el doctype. El tipo de documento debe ser la primera línea de
cada página HTML. Las versiones anteriores de HTML definen una gran cantidad de doctype,
y elegir el más adecuado podría resultar a veces complicado. En cambio, para la última versión
de este lenguaje solo se define un tipo de documento. La forma de indicar que el documento
escrito pertenece a la versión 5 de HTML es la siguiente:
<!DOCTYPE html>
La actualización a este tipo de documento no modificará ni supondrá ningún cambio en la
página, ya que como hemos comentado anteriormente HTML 5 presenta compatibilidad con
HTML 4, por lo que todas las etiquetas y atributos definidos en el documento HTML 4 siguen
siendo compatibles con HTML 5, permitiéndole además aprovecharse de todas las ventajas del
nuevo estándar.
A continuación, vemos cuáles son las nuevas características que incorpora esta versión de
HTML al lenguaje.
Una de las principales novedades de HTML 5 es que admite tanto la serialización HTML
como XHTML. De este modo HTML 5 especifica dos variantes de sintaxis: la variante clásica
conocida como HTML5 (text/html) y la variante XHTML conocida como sintaxis XHTML 5
que deberá ser servida como XML (XHTML) (application/xhtml+xml). Esta es la primera vez
que HTML y XHTML se han desarrollado en paralelo.
Otra de las novedades más destacadas de HTML 5 es la inclusión de DOM (Document Object
Model) como fundamento del lenguaje. El DOM describe la estructura de un documento de
acuerdo con el paradigma de la orientación a objetos. Hasta ahora el DOM se había tratado
siempre de forma separada, pero en HTML 5, el DOM forma parte del estándar. De este modo
se evita el tener que desarrollar versiones distintas de una misma página según el programa
que será ejecutado en el lado cliente.
Aparte de estas dos principales novedades, existen otras como la aparición de nuevos elementos
HTML y de nuevos atributos para estos elementos. A continuación, vemos las más interesantes.
• Mejora en la estructura del documento.
33
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
Hoy en día se abusa bastante del elemento div, el cual nos permite estructurar la Web en
bloques. HTML 5 define varios elementos que nos servirá para estructurar mejor una página
Web. De este modo, además, será más fácil entender la estructura del documento por otras
personas y trivial de entender por una máquina. Así se añaden nuevos elementos como section
que representa una sección general dentro de un documento o article que representa un
contenido independiente en un documento. Incorpora también los elementos header y footer
que serán la cabecera y pie del documento respectivamente. O el elemento nav que representa
una sección dedicada a la navegación. En la figura 3.1 se puede ver un esquema de la nueva
estructura de un documento HTML.
Figura 3.1: Estructura documento HTML 5.
• Mejora en los formularios.
El elemento input de los formularios ha sido ampliado permitiendo ahora más tipos de datos,
entre los cuales se encuentran number para indicar un número, range que indicará un rango
34
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
entre dos números, email para correos electrónicos, url para introducir direcciones Web, search
para búsquedas o color para indicar un color.
• Mejora en la distribución de contenido multimedia.
HTML 5 define dos nuevos elementos para la representación de contenido multimedia en una
página Web. Estos elementos son los elementos video y audio, que servirán para incrustar un
vídeo o un archivo de sonido en la página respectivamente. Esta es una de las características
más interesantes y que más polémicas está levantado de HTML 5. El debate de si HTML 5
se acabará imponiendo a Flash, sigue aún hoy a la orden del día.
• Otros elementos.
Otros de los nuevos elementos que añade HTML 5 es el elemento embed, el cual servirá
para incluir contenido incrustado pero no nativo, es decir, que será ejecutado por plugins de
terceros como podría ser Flash. También es interesante el elemento canvas el cual permite
generar gráficos, dibujando elementos dentro de él. También se definen otros elementos como
progress que representa el estado de una tarea, command que representa un comando que el
usuario puede ejecutar en su navegador, entre otros.
• Nuevos atributos.
Además de los nuevos elementos que define HTML 5, también especifica nuevos atributos para
todos o algunos de los elementos que componen HTML. Entre ellos se encuentran el atributo
ping para el elemento a, que contiene una lista de URLs, el atributo autofocus para elementos
de un formulario, que indicará qué elemento del formulario ganará el foco al cargar la página.
El atributo required para indicar que ese elemento del formulario es de rellenado obligatorio.
O los atributos autocomplete, min, max,... para los elementos input.
• Nuevos atributos globales.
Estos son atributos que pueden ser aplicados a todos los elementos. Por ejemplo, los atributos
ya existentes id, class, style, se permiten ahora en todos los elementos. Además, se definen
otros como draggable, para indicar que el elemento se puede arrastrar, o hidden para ocultar
un elemento. El atributo contextmenu para indicar un menú contextual sobre un elemento. O
el atributo conteneditable, que indicará que el elemento es editable por el usuario.
35
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
• Nuevas APIs.
El estándar HTML 5 también desarrolla nuevas APIs para la manipulación de sus elementos.
Entre ellas están la API para el control de los elementos multimedia audio y vídeo. También se
especifica una API para guardar datos localmente, útil para que las aplicaciones Web puedan
trabajar sin necesitar conexión a Internet, es el DOM storage. Una API para controlar las ac-
ciones drag & drop, otra para controlar el historial Web. Y otra para habilitar la comunicación
entre varias páginas Web.
• Novedades en el DOM.
Además se añaden nuevas funciones y atributos a los elementos DOM. Por ejemplo, el atributo
innerHTML se añade al estándar. O por ejemplo, la función getElementsByClassName() se
añade a todos los elementos y al documento.
• Elementos eliminados.
No todo son nuevas incorporaciones al estándar, sino que también se eliminan ciertos elemen-
tos. Aquí existe una dualidad, ya que por un lado para que el documento sea validado como
documento HTML 5, no deberá incluir ninguno de estos elementos, pero por otro lado, los
navegadores deben soportarlos para que HTML 5 sea compatible hacia atrás con HTML 4. Así,
se eliminan elementos puramente presentacionales, ya que el tema estético se debe tratar con
CSS, como son center, big, basefont, font,... También se eliminan los elementos para trabajar
con frames (frame, frameset y noframes). Desaparecen también los elementos applet y dir
declarados como obsoletos.
• Atributos eliminados.
Todos los atributos referentes a la representación han sido eliminados, ya que CSS sirve mejor
ese propósito. Así, elementos como align, background, bgcolor, border, height,... han sido
eliminados, algunos de ellos en todos los elementos y otros solo en algunos de ellos. También
hay otros que se eliminan por su redundancia o por su desuso como es el caso de atributos
con link en el elemento target, el atributo profile en head, version en html, name en los
elemento img y a, languaje en el elemento script, etc.
En definitiva, HTML 5 es un estándar creado para modernizar la Web, mejorar la estructura
del documento y facilitar el desarrollo de aplicaciones Web online y offline.
36
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
3.2.4. Distribución de contenido multimedia con HTML 5.
Como se acaba de comentar, el estándar HTML 5 define nuevos elementos para facilitar
la distribución de contenido multimedia a través de páginas Web. Estos elementos son los
elementos video y audio. Además, HTML 5 define también una API para manejar el control
de la reproducción de estos medios.
A continuación, se explica las características de estos nuevos elementos y de las funciones
principales de la API definida para este fin.
3.2.4.1. Elemento media.
Los elementos video y audio extienden al elemento media. El elemento media implementa la
interfaz que se muestra en el cuadro 3.3.
Los atributos src, preload, autoplay, loop, muted y controls son comunes a todos los ele-
mentos media como pueden ser los elemento audio o video.
Los elementos media son usados para representar datos de audio, o datos de audio y vídeo,
al usuario. Los elementos audio y video se pueden utilizar indistintamente para un recurso
multimedia de vídeo o de audio. La única diferencia entre ambos elementos es que el elemento
video muestra una pantalla de visualización, mientras que el elemento audio no.
A continuación, vemos los atributos y funciones más destacados de estos elementos HTML:
• Atributo error: este atributo devuelve un elemento MediaError, el cual representará el
error actual del elemento o null si no ha habido ningún error. La interfaz MediaError
se muestra en el cuadro 3.1.
in ter face MediaEr ro r {const uns i gned short MEDIA_ERR_ABORTED = 1 ;const uns i gned short MEDIA_ERR_NETWORK = 2 ;const uns i gned short MEDIA_ERR_DECODE = 3 ;const uns i gned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4 ;r e a d on l y a t t r i b u t e un s i gned short code ;
} ;
Cuadro 3.1: Interfaz MediaError
37
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
• Atributo networkState: devuelve el estado actual de actividad de la red para el elemento.
Puede tener los siguientes valores:
◦ NETWORK_EMPTY (valor numérico 0): el elemento no ha sido aún inicializado.
Todos los atributos están en sus estados iniciales.
◦ NETWORK_IDLE (valor numérico 1): el elemento está activo y se ha seleccio-
nado el recurso, pero aún no se ha utilizado la red.
◦ NETWORK_LOADING (valor numérico 2): el agente de usuario está tratando
de descargar datos.
◦ NETWORK_NO_SOURCE (valor numérico 3): el elemento está activo pero no
se ha encontrado el recurso multimedia.
• Atributo buffered: el atributo buffered debe devolver un nuevo objeto TimeRanges que
representa los rangos del recurso multimedia que el agente de usuario tiene cargado y
disponible en el buffer en el momento en que este atributo es evaluado. La interfaz de
un objeto TimeRanges se muestra en el cuadro 3.2. Donde length devuelve el número
de rangos en el objeto, start devuelve el instante donde comienza el rango indicado
por index y end hace lo propio pero con el instante final. start y end lanzan un IN-
DEX_SIZE_ERROR si el index está fuera del rango.
in ter face TimeRanges {r e a d on l y a t t r i b u t e un s i gned long l e n g t h ;double s t a r t ( i n un s i gned long i n d e x ) ;double end ( i n un s i gned long i n d e x ) ;
} ;
Cuadro 3.2: Interfaz TimeRanges
• Atributo duration: devuelve la duración del recurso multimedia en segundos, asumiendo
que el recurso comienza en el instante cero. Devuelve NaN si no está disponible y Infinity
para flujos sin límites.
• Atributo currentTime: devuelve el instante actual de reproducción del recurso multi-
media en segundos. Puede ser modificado para saltar la reproducción a un instante
determinado.
• Atributo initialTime: devuelve la posición inicial de reproducción, que es, el instante en
el cual comenzó la reproducción cuando fue cargado. Devuelve cero si es desconocido.
38
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
• Atributo readyState: devuelve un valor que representa el estado actual del elemento
respecto al estado actual en la reproducción. Puede tener los siguientes valores:
◦ HAVE_NOTHING (valor numérico 0): no se dispone de ninguna información
sobre el recurso multimedia. No hay datos para el instante inicial de reproducción.
◦ HAVE_METADATA (valor numérico 1): se ha obtenido la duración del recurso,
en caso de ser un vídeo las dimensiones del mismo, pero aún no se disponen de
datos.
◦ HAVE_CURRENT_DATA (valor numérico 2): los datos para la posición de
reproducción inmediata están ya disponibles, pero o bien no se dispone aún de
suficientes datos para que el agente de usuario sea capaz de reproducirlos, o bien
ya no hay más datos que obtener del recurso.
◦ HAVE_FUTURE_DATA (valor numérico 3): los datos del siguiente instante a
reproducir están disponibles, así como los datos suficientes como para que el agente
de usario pueda avanzar con la reproducción.
◦ HAVE_ENOUGH_DATA (valor numérico 4): se cumplen las condiciones del
estado anterior y además el agente de usuario estima que tiene datos suficientes
como para ser capaz de reproducir correctamente aún aumentando la velocidad de
reproducción.
• Atributo paused: devuelve true si la reproducción está pausada; false en caso contrario.
Incialmente estará a true.
• Atributo ended: devuelve true si la reproducción ha llegado al final del recurso multi-
media; false en caso contrario.
• Atributo defaultPlaybackRate: devuelve la velocidad de reproducción por defecto del
recurso. Se puede ajustar para modificarla.
• Atributo playbackRate: devuelve la velocidad de reproducción actual. Será 1.0 en caso
de que la velocidad sea la normal. Se puede ajustar para modificar dicha velocidad.
• Atributo played: devuelve un objeto TimeRanges que representa los rangos del recurso
multimedia que el agente de usuario ha reproducido.
• Función play(): establece el atributo paused a false, carga el recurso multimedia (si aún
no estaba cargado) y comienza la reproducción del mismo. Si la reproducción se había
terminado lo reinicia desde el principio.
• Funciaón pause(): establece el atributo paused a true deteniendo la reproducción.
39
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
• Atributo seeking: devuelve true si el agente de usuario está buscando.
• Atributo seekable: devuelve un objeto TimeRanges que representa los rangos que el
agente de usuario puede buscar.
• Atributo volume: devuelve el actual valor del volumen como un número dentro del rango
0.0 a 1.0, siendo el valor 0.0 el de silencio y el 1.0 el de mayor intensidad de volumen.
Se puede ajustar para modificar el volumen actual de la reproducción.
• Atributo muted: devuelve true si el audio está en silencio, anulando en este estado el
atributo volume, y falso en caso contrario. Se puede ajustar para modificar el estado
del audio a silencio o no.
3.2.4.2. Elemento video.
Hasta ahora, no había un estándar para la reproducción de vídeos en una página Web. La
mayoría de los vídeos en una página Web se muestran a través de plugins adicionales que deben
instalarse previamente en el navegador, tales como Flash de Adobe. HTML 5 especifica una
forma estándar para incluir vídeos, como un elemento más de una página Web, sin necesidad
de añadir plugins adicionales a nuestros navegadores.
El nuevo elemento video es una de las características más destacables del nuevo estándar
HTML 5. Este elemento se utiliza para reproducir archivos de vídeos. Es un elemento media
cuyos datos son vídeos que llevan generalmente pistas de audio asociadas.
Una de las tecnologías más utilizadas en este sentido es la tecnología Flash. En el cuadro 3.4
mostramos un ejemplo del código HTML necesario para integrar un vídeo en una página Web
con el uso de esta tecnología.
En cambio, con la aparición del elemento video los navegadores no necesitarán plugins adicio-
nales para la visualización de un vídeo. El código necesario para incluir un vídeo en la página
Web puede ser tan sencillo como el que se muestra en el cuadro 3.5.
Si el navegador Web no es compatible con este elemento de HTML 5, el navegador no mostrará
nada y será tarea del diseñador mostrar un mensaje de error que clarifique al usuario dicha
incompatibilidad, siendo conveniente además detallar posibles soluciones.
Además, hay que tener en cuenta que puede que el navegador sea compatible con el elemento
video pero en cambio no soporte el formato del archivo. Si esto ocurre, igualmente será tarea
del diseñador de avisar convenientemente al cliente.
40
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
in ter face HTMLMediaElement : HTMLElement {// e r r o r s t a t er e a d on l y a t t r i b u t e Med iaEr ro r ? e r r o r ;// network s t a t e a t t r i b u t eDOMString s r c ;const uns i gned short NETWORK_EMPTY = 0 ;const uns i gned short NETWORK_IDLE = 1 ;const uns i gned short NETWORK_LOADING = 2 ;const uns i gned short NETWORK_NO_SOURCE = 3 ;r e a d on l y a t t r i b u t e un s i gned short ne tworkSta t e ;a t t r i b u t e DOMString p r e l o a d ;r e a d on l y a t t r i b u t e TimeRanges b u f f e r e d ;void l o ad ( ) ;DOMString canPlayType ( i n DOMString type ) ;// ready s t a t econst uns i gned short HAVE_NOTHING = 0 ;const uns i gned short HAVE_METADATA = 1 ;const uns i gned short HAVE_CURRENT_DATA = 2 ;const uns i gned short HAVE_FUTURE_DATA = 3 ;const uns i gned short HAVE_ENOUGH_DATA = 4 ;r e a d on l y a t t r i b u t e un s i gned short r e ad yS t a t e ;r e a d on l y a t t r i b u t e boolean s e e k i n g ;// p l a yback s t a t ea t t r i b u t e double cu r r en tT ime ;r e a d on l y a t t r i b u t e double i n i t i a l T i m e ;r e a d on l y a t t r i b u t e double du r a t i o n ;r e a d on l y a t t r i b u t e Date s t a r tO f f s e tT ime ;r e a d on l y a t t r i b u t e boolean paused ;a t t r i b u t e double d e f a u l tP l a y b a c kRa t e ;a t t r i b u t e double p l aybackRate ;r e a d on l y a t t r i b u t e TimeRanges p l a y ed ;r e a d on l y a t t r i b u t e TimeRanges s e e k a b l e ;r e a d on l y a t t r i b u t e boolean ended ;a t t r i b u t e boolean au t op l a y ;a t t r i b u t e boolean l oop ;void p l a y ( ) ;void pause ( ) ;// c o n t r o l sa t t r i b u t e boolean c o n t r o l s ;a t t r i b u t e double volume ;a t t r i b u t e boolean muted ;a t t r i b u t e boolean de fau l tMuted ;
} ;
Cuadro 3.3: Interfaz elemento media
41
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
<object width="560" height="349"><param name="movie "value=" ht tp ://www. youtube . com/v/wbwVsHxLPYo? v e r s i o n=3& ; h l=es_ES& ; r e l =0"></param><param name=" a l l owFu l l S c r e e n " value=" t r u e "></param><param name=" a l l o w s c r i p t a c c e s s " value=" a lways "></param><embeds rc=" ht tp ://www. youtube . com/v/wbwVsHxLPYo? v e r s i o n=3& ; h l=es_ES& ; r e l =0"type=" a p p l i c a t i o n /x−shockwave−f l a s h " width="560" height="349"a l l o w s c r i p t a c c e s s=" a lways " a l l o w f u l l s c r e e n=" t r u e "></embed></object>
Cuadro 3.4: Código para insertar vídeo mediante Flash.
<v id eo width="640" height="360"s rc=" ht tp :// path / to / v i d eo / v i d e o .mp4" c o n t r o l s>
</ v i d eo>
Cuadro 3.5: Código para insertar vídeo mediante HTML 5.
En el cuadro 3.6 se muestra la compatibilidad de distintos navegadores con la etiqueta video
de HTML 5.
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
9.0+ 3.5+ 3.0+ 3.0+ 10.5+ 1.0+ 2.0+
Cuadro 3.6: Compatibilidad con etiqueta video
En el cuadro 3.7 mostramos la compatibilidad de los principales navegadores Web con los
distintos formatos contenedores que funcionan sobre HTML 5.
Veamos cuales son los atributos de los que dispone este nuevo elemento HTML:
• Atributos globales: los atributos globales son aquellos comunes a cualquier elemento
HTML. Entre ellos podemos citar los atributos class, id, title, style,... entre otros.
• Atributo src: en este atributo se especifica la dirección del recurso multimedia a mostrar.
• Atributo poster: imagen de fondo del vídeo cuando aún no se ha comenzado a descargar.
• Atributo preload: atributo para indicar si se desea o no empezar a descargar el vídeo al
cargarse la página.
• Atributo autoplay: para indicar si se desea empezar a reproducir el vídeo al cargar la
página que lo contiene. Este atributo sobreescribe al atributo preload.
42
3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
CODECS/FORMATO IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
Theora+Vorbis=Ogg x 3.5+ x 5.0+ 10.5+ x xH.264+ACC=MP4 9.0+ x 3.0+ x x 3.0+ 2.0+
VP8+Vorbis=WebM 9.0+ 4.0+ x 6.0+ 10.6+ x x
Cuadro 3.7: Compatibilidad con códecs
• Atributo loop: para reproducir el vídeo en bucle. Al terminar de reproducirse comenzará
la reproducción de nuevo.
• Atributo muted: si queremos que el vídeo se comience a reproducir sin sonido.
• Atributo controls: para incluir en el vídeo los controles que cada navegador implemente
de forma nativa.
• Atributo width: específica el ancho de la pantalla de visualización para el vídeo.
• Atributo height: específica el alto de la pantalla de visualización para el vídeo.
La interfaz DOM para este elemento HTML es la que se muestra en el cuadro 3.8.
in ter face HTMLVideoElement : HTMLMediaElement {a t t r i b u t e un s i gned long width ;a t t r i b u t e un s i gned long h e i g h t ;r e a d on l y a t t r i b u t e un s i gned long v ideoWidth ;r e a d on l y a t t r i b u t e un s i gned long v i d e oHe i gh t ;a t t r i b u t e DOMString p o s t e r ;
} ;
Cuadro 3.8: Interfaz DOM elemento video
Cuando aún no se ha comenzado a descargarse datos del vídeo, en la pantalla de visualización
se muestra la imagen que se indica en el atributo poster, o si no se ha especificado tal atributo
se mostrará la imagen que el vídeo en cuestión tenga establecido como fondo. Si no se da
ninguno de los casos anteriores se muestra la pantalla vacía.
Cuando el vídeo se encuentra en estado de pausa en una posición cualquiera, se motrará en la
pantalla el fotograma correspondiente a esa posición o si aún no está disponible porque aún
no se ha descargado, se muestra el último fotograma mostrado.
Los atributos videoWidth y videoHeight devuelven las dimensiones del vídeo que queremos
incluir. Las dimensiones se devuelven en píxeles CSS y devolverá 0 en caso de que no sean
conocidas.
43
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
3.2.4.3. Elemento Source.
Este elemento no es estrictamente necesario a la hora de incluir un vídeo en nuestra página
Web, en cambio debido a la lucha en torno a los formatos de vídeo y a las incompatibilida-
des que los navegadores presentan con los mismos, este elemento resulta ser prácticamente
imprescindible.
El elemento source permite al diseñador Web especificar varias fuentes alternativas del recurso
multimedia. En sí no representa nada, sólo permite adjudicar diferentes archivos de vídeo a
un mismo elemento video. Se pueden incluir tantos elementos source como se deseen. El
navegador comenzará a reproducir el primer archivo con el que encuentre compatibilidad.
Los atributos de los que dispone son los siguientes:
• Atributos globales.
• Atributo src: debe estar presente y especifica la ruta al archivo multimedia que se pre-
tende mostrar en la Web.
• Atributo type: para especificar información sobre el tipo de recurso multimedia al que
hace referencia el atributo src. Este atributo ayuda al agente de usuario a determinar si
será capaz o no de reproducir el recurso multimedia al que está asociado sin necesidad
de tener que cargarlo. Debe contener un valor de MIME (Multipurpose Internet Mail
Extensions) correcto. Estos valores vendrán determinado en función del formato del ar-
chivo. Puede incluir un parámetro llamado codecs que especificará como está codificado
exactamente el recurso.
La interfaz DOM de este elemento se muestra en el cuadro 3.9.
in ter face HTMLSourceElement : HTMLElement {a t t r i b u t e DOMString s r c ;a t t r i b u t e DOMString type ;a t t r i b u t e DOMString media ;
} ;
Cuadro 3.9: Interfaz DOM elemento source
3.3. Django.
Django es un framework multiplataforma para desarrollo Web de código abierto escrito en
Python. Su principal funcionalidad es la de facilitar el desarrollo de las aplicaciones Web,
44
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
permitiendo construir este tipo de aplicaciones más rápido y con menos código.
Fue inicialmente desarrollado para gestionar aplicaciones Web de páginas orientadas a noticias
de World Online, más tarde fue liberada al público bajo licencia BSD (Berkeley Software
Distribution) en julio de 2005.
Sigue en cierto modo el patrón MVC (Modelo Vista Controlador). Éste es un patrón de
arquitectura de software que separa los datos de una aplicación, la interfaz de usuario y la
lógica de control en tres componentes distintos.
Además, Django está centrado en la reutilización de código, la conectividad y extensibilidad de
componentes, del desarrollo rápido y la automatización de tareas lo máximo posible, siguiendo
el principio DRY (Don’t Repeat Yourself). Este principio es una filosofía de definición de
procesos que promueve la reducción de la duplicación especialmente en computación. Cuando el
principio DRY se aplica de forma eficiente los cambios en cualquier parte del proceso requieren
cambios en un único lugar. Por el contrario, si algunas partes del proceso están repetidas por
varios sitios, los cambios pueden provocar fallos con mayor facilidad si todos los sitios en los
que aparece no se encuentran sincronizados.
3.3.1. Configuraciones iniciales: Estructura de un proyecto Djan-
go.
• Proyectos vs. Aplicaciones: ¿Cuál es la diferencia entre un proyecto y una
aplicación?
Django distingue entre proyectos y aplicaciones. Una aplicación será una parte que aportará
una funcionalidad determinada y diferenciada al proyecto. Una aplicación, será por tanto, una
aplicación Web que hace algo particular, como por ejemplo, una bitácora, un registro de datos
públicos o un sistema de encuestas. Un proyecto es un conjunto de aplicaciones configuradas
para un sitio Web particular. Un proyecto puede contener múltiples aplicaciones. Una aplicación
puede pertenecer a múltiples proyectos.
• Crear un proyecto Django.
Para crear un proyecto Django será necesario autogenerar código que define el proyecto Django,
además de realizar las configuraciones propias para la base de datos y otras opciones que se
detallarán a continuación.
45
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
Para generar el código inicial que define el proyecto Django solo hay que situarse en el directorio
donde se desea crear y ejecutar el siguiente comando:
$ django−admin . py s t a r t p r o j e c t mys i t e
Esto crea un directorio mysite en el directorio actual, en el que se guardan cuatro ficheros
generados automáticamente por el framework y que son una colección de configuraciones de
instancias de Django incluyendo configuración de bases de datos y algunas especificaciones.
Los archivos y su funcionalidad se detallan a continuación:
• __init__.py: un archivo necesario para que Django trate el directorio como un paquete
Python (un grupo de módulos de Python). Es un fichero vacío, y normalmente no se le
añade nada.
• manage.py: utilidad de línea de comandos que le permite interactuar con el proyecto
Django de diversas maneras.
• settings.py: características de configuración del proyecto Django. Inicialmente viene con
unos valores por defecto, los cuáles pueden ser modificados. Son una serie de variables
definidas que se utilizan en las demás partes de los proyectos Django.
• urls.py: en este archivo se escriben las direcciones URL de este proyecto Django. Será
como la “tabla de contenidos” del sitio Django. Inicialmente trae las URLs necesarias
para iniciar el sitio de administración de Django.
Inicialmente el proyecto solo consta de los archivos que se han mencionado con anterioridad.
Se puede decir que los archivos anteriores constiyen la base de todo proyecto Django.
• El servidor de desarrollo.
Django cuenta con un servidor Web ligero escrito puramente en Python. De este modo se
pueden probar las aplicaciones más rápidamente mientras se encuentran en la fase de desarrollo,
sin necesidad de tener que lidiar con la configuración de un servidor de producción, como
puede ser Apache, hasta que esté listo para la producción. Este servidor no se debe utilizar
para producción, está pensado solo para el uso durante el desarrollo de la aplicación.
Para ejecutar el servidor de Django se tiene que ejecutar el siguiente comando:
$ python manage . py r u n s e r v e r
46
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
Si todo va bien y no hay errores en el código, la salida de este comando será la siguiente:
V a l i d a t i n g models . . . 0 e r r o r s found .
Django v e r s i o n 1 . 0 , u s i n g s e t t i n g s ’ mys i t e . s e t t i n g s ’
Development s e r v e r i s r unn i ng at h t tp : / / 1 2 7 . 0 . 0 . 1 : 8 0 0 0 /
Quit the s e r v e r w i th CONTROL−C .
Por defecto, el comando runserver inicia el servidor en la dirección IP local y el puerto 8000.
Por tanto, si accede mediante un navegador Web a la dirección http://127.0.0.1:8000/ verá
un mensaje de bienvenida, que indica que Django está funcionando correctamente. Puede
utilizar los comandos python manage.py runserver 8080 o python manage.py runserver
0.0.0.0:8000 si desea cambiar el puerto o el puerto y la dirección del servidor respectivamente.
• Configuración de la base de datos.
Aunque no es estrictamente necesario, lo más habitual a la hora de desarrollar una aplicación
Web será utilizar bases de datos.
La configuración de la base de datos, y en general, la configuración del proyecto Django,
se realiza en el archivo settings.py. Éste es un módulo Python normal con variables que
representan configuraciones del proyecto Django. En concreto, para la configuración de la
base de datos debemos tener en cuenta los siguientes aspectos:
• DATABASE_ENGINE: motor de base de datos que se está utilizando. La versión que
estamos utilizando de Django admite la utilización de los siguientes motores de base de
datos: postgresql_psycopg2, postgresql, mysql, sqlite3 o oracle.
• DATABASE_NAME: el nombre de tu base de datos.
• DATABASE_USER: el usuario de la base de datos (no usado en SQLite).
• DATABASE_PASSWORD: la contraseña de la base de datos (no usado en SQLite).
• DATABASE_HOST: la máquina donde está ubicada la base de datos. Se dejará como
una cadena vacía si la base de datos está en la misma máquina física (no usado en
SQLite).
• DATABASE_PORT: el puerto que se utilizará para conectar a la base de datos de la
máquina (no usado en SQLite).
47
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
Antes de dar valores a las variables anteriores se debe crear la base de datos con un nombre
concreto y también será conveniente especificar el conjunto de caracteres que utilizará, como
por ejemplo utf-8.
• Creación de aplicaciones.
Al igual que a la hora de crear un proyecto, Django cuenta con una utilidad que genera
automáticamente la estructura de directorios básica de una aplicación, de forma que se pueda
enfocar en escribir código en vez de estar creando directorios.
Para empezar una nueva aplicación, dentro del directorio raíz de nuestro proyecto se debe
ejecutar el siguiente comando:
$ python manage.py startapp app
Esto creará un directorio app, que contiene la siguiente estructura:
app/
__init__ . py
models . py
t e s t s . py
v i ews . py
En próximos apartados se explica la funcionalidad de los archivos models.py y views.py.
• Instalación de aplicaciones.
El archivo settings.py cuenta además con una variable denominada INSTALLED_APPS, la
cual contiene el nombre de todas las aplicaciones Django que están activadas en el proyecto.
Las aplicaciones pueden ser empaquetadas y distribuidas para ser usadas por otros proyectos.
Por defecto, INSTALLED_APPS contiene las siguientes aplicaciones (todas ellas vienen con
Django):
• django.contrib.auth: un sistema de autenticación.
• django.contrib.contenttypes: un framework para tipos de contenidos.
• django.contrib.sessions: un framework para manejar sesiones.
48
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
• django.contrib.sites: un framework para manejar múltiples sitios con una única instala-
ción Django.
Esas aplicaciones van incluidas por omisión como conveniencia para el caso común. Para poder
hacer uso de ellas tenemos que ejecutar el comando syncdb, el cual se explica en el apartado
3.3.3 de la memoria.
3.3.2. El sitio de administración.
Para cierto tipo de sitios Web, una interfaz de administración es una parte esencial de la
infraestructura. El sitio de administración de Django se trata de una interfaz basada en Web,
limitada a los administradores autorizados, que permite agregar, editar y eliminar el contenido
del sitio. Además, también podemos añadir al sitio de administración los modelos que hemos
definido en las distintas aplicaciones que han sido incluidas en el proyecto.
Para activar el sitio de administración, hay que añadir los paquetes necesarios a la variable INS-
TALLED_APPS y añadir la URL necesaria. Así, si accedemos a http://localhost:8000/admin/,
veremos una página en la que se nos pide ingresar el usuario y la contraseña. Esta pantalla se
muestra en la figura 3.2.
Figura 3.2: Incio sesión sitio de administración Django
Al entrar en el sitio, veremos la interfaz de administración. En ella encontraremos distintos
enlaces para acceder a los usuarios registrados en el sitio, los grupos creados, así como las
aplicaciones que han sido instaladas. Esta pantalla se muestra en la figura 3.3.
49
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
Figura 3.3: Pantalla principal sitio de administración Django
En el sitio de administración podemos añadir objetos en nuestros modelos creados. En la figura
3.4 podemos ver un ejemplo. Además de ver una lista con todas los objetos creados en una
determinada aplicación. Esto puede verse en la figura 3.5.
Figura 3.4: Añadir modelo sitio de administración Django
Figura 3.5: Pantalla lista de objetos de una aplicación.
50
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
3.3.3. Modelos.
Aunque es posible utilizar Django sin una base de datos, lo más habitual será tener que utilizar
alguna base de datos para cualquier proyecto Django. Para esto el framework cuenta con un
mapeador objeto-relacional en el que es posible describir la estructura de la base de datos
usando Python.
Si se tiene que hacer uso de modelos en la aplicación, éste será el primer paso a realizar.
Los modelos son básicamente la definición de la estructura de la base de datos. Los mode-
los se definen en el archivo models.py del directorio de cada aplicación. Cada modelo está
representado por una subclase de la clase django.db.models.Model. Los modelos se definen
como clases que contienen una serie de variables, las cuales representan campos en la base de
datos. A su vez, cada campo está representado por una instancia de una clase models.Field,
como pueden ser models.CharField o models.DateTimeField. Para cada aplicación que se
instale en el proyecto se puede definir un archivo models.py distinto. De esta forma se le dice
a Django qué tipo de datos contiene cada campo.
Un ejemplo de definición de modelo se muestra a continuación:
c lass Po l l ( models . Model ) :
q u e s t i o n = models . Cha rF i e l d ( max_length=200)
pub_date = models . DateTimeF ie ld ( ’ date ␣ p u b l i s h e d ’ )
• Activando modelos: El comando syncdb.
Con sólo definir los modelos de la aplicación tal y como se ha comentado anteriormente,
Django es capaz de obtener mucha información. Por ejemplo, ahora Django es capaz de:
• Crear un esquema de base de datos (por ejemplo sentencias CREATE TABLE de
MySQL) para esta aplicación.
• Crear una API de acceso a datos en Python para acceder a los objetos definidos para la
aplicación.
Pero para eso hay que decirle al proyecto que instale la nueva aplicación creada. Para esto
lo primero que hay que hacer es modificar la variable INSTALLED_APPS del archivo set-
tings.py y añadir el nombre del paquete de la nueva aplicación. A continuación, se tiene que
51
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
ejecutar el comando syncdb para que cree todas las tablas, datos iniciales y los índices para
cada aplicación que se haya agregado al proyecto desde la última vez que se ejecutó este mismo
comando. syncdb puede ser ejecutado tan frecuentemente como se desee, y sólo creará las
tablas que no existan.
Para instalar los modelos definidos en la base de datos se ejecuta el siguiente comando:
$ python manage . py syncdb
• API.
Además, Django cuenta con una API para poder acceder a un determinado objeto de la base
de datos creada. Así, podemos buscar el elemento que tiene un determinado identificador, un
campo con un valor determinado,... En definitiva, acceder a los datos al igual que podríamos
hacerlo usando MySQL.
3.3.4. Formularios.
El paquete django.forms contiene una librería para la manipulación de formularios HTML.
Si bien es posible procesar los envíos de formularios sólo con clase HttpRequest de Django,
esta biblioteca de formularios se encarga de una serie de tareas comunes relacionadas con
el procesamiento de formularios, lo cual facilita mucho la tarea del procesamiento de los
formularios. Al usarlo, se puede:
• Mostrar el formulario HTML con las etiquetas que se generan automáticamente.
• Comprobar la validez de los datos introducidos siguiendo un conjunto de reglas de vali-
dación.
• Volver a mostrar un formulario en el caso de que se produzcan errores de validación.
• Convertir los datos introducidos en el formulario a tipos de datos relevantes en Python.
52
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
3.3.5. URLs.
Un esquema de URLs limpio y elegante es un detalle importante en una aplicación Web de alta
calidad. Django incentiva el diseño de URLs elegante y no agrega ningún lastre a las URLs,
como lo hacen PHP (Hypertext Pre-processor) o ASP (Active Server Pages).
El módulo URLconf es como una tabla de contenido para el sitio Web hecho con Django.
Básicamente, es un mapeo entre los patrones URL y las funciones de vista que deben ser
llamadas por esos patrones URL. Es como decirle a Django, para esta URL, llama a este
código, y para esta URL, llama a este otro código. Es importante destacar que las funciones
de vista deben estar en el directorio de Python.
Lo principal que debemos destacar aquí es la variable urlpatterns, la cual Django espera
encontrar en la variable ROOT_URLCONF del archivo de configuración settings.py. Esta
variable define el mapeo entre las URLs y el código que manejan esas URLs.
El funcionamiento es el siguiente: cuando un usuario solicita una página, Django accede al
contenido de la variable ROOT_URLCONF que se encuentra en el archivo settings.py y
que contiene una cadena con el módulo donde se encuentra el patrón de direcciones. A con-
tinuación, Django cargará ese módulo y buscará la variable urlpatterns que es una secuencia
de tuplas. Irá comprobando valor por valor hasta encontrar una coincidencia con la direc-
ción pedida por el usuario. Así, Django llamará a la función que le corresponde con el objeto
HttpResquest como primer argumento.
Una vez que una de las expresiones coincide, Django importa y llama a la vista correspondiente,
la cual es una simple función Python. Cada vista recibe un objeto HttpResquest, que contiene
los metadatos de la petición y los valores capturados en la expresión regular.
Un ejemplo sencillo de urlpatterns se muestra a continuación:
u r l p a t t e r n s = p a t t e r n s ( ’ ’ ,
( r ’^ p o l l s /$ ’ , ’ p o l l s . v i ews . i n d e x ’ ) ,
( r ’^admin/ ’ , i n c l u d e ( admin . s i t e . u r l s ) ) ,
)
3.3.6. Vistas.
Una función de vista, o simplemente vista, es una simple función de Python que toma como
argumento una petición Web y que retorna una respuesta Web. La respuesta puede ser el
53
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
contenido HTML de un página Web, una redirección, un error 404, un documento XML,
o cualquier tipo de archivo. La vista en sí contiene toda la lógica necesaria para retornar la
respuesta. El código puede encontrarse en cualquier directorio siempre que se encuentre dentro
del directorio de Python, pero es habitual incluir estas funciones dentro del archivo views.py
que se crea automáticamente al crear una aplicación.
Cada vista (view) es responsable de hacer una de estas dos cosas, lo demás será responsabilidad
del desarrollador:
• Devolver un objeto HttpResponse con el contenido de la página solicitada.
• Lanzar una excepción si la página solicitada no existe, como por ejemplo una respuesta
HTTP 404.
La vista se encargará de leer registros de la base de datos si es necesario. Podrá utilizar un
sistema de plantillas como la de Django, o algún sistema plantillas de terceros, si se requie-
re. Puede generar un archivo PDF (Portable Document Format), XML (Extensible Markup
Language), crear un archivo ZIP,... En general, todo lo que las bibliotecas Python les permita
hacer.
El ejemplo más sencillo de vista podría ser una función que devuelva una simple cadena de
texto. Este ejemplo se muestra a continuación:
def i n d e x ( r e q u e s t ) :
return HttpResponse ( " He l l o , ␣ wor ld . ␣You ’ r e ␣ at ␣ the ␣ p o l l ␣ i nd e x . " )
3.3.7. Plantillas.
Una plantilla de Django es una cadena de texto que pretende separar la presentación de un
documento de sus datos. Una plantilla define una serie de etiquetas que regulan cómo debe
ser mostrado el documento. Normalmente, las plantillas son usadas para producir HTML, pero
las plantillas de Django son igualmente capaces de generar cualquier formato basado en texto.
Django tiene una ruta de búsqueda de plantillas, lo que permite minimizar la redundancia
entre ellas. En la configuración de Django, es posible especificar una lista de directorios donde
se buscarán las plantillas. Si una plantilla no existe en el primer directorio, se busca en el
siguiente, y así sucesivamente.
54
3.3. DJANGO. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
Las variables están encerradas por llaves dobles. Por ejemplo, {{ article.headline }} significa
"Imprimir en el documento el valor del atributo headline de la variable article". Pero los
puntos no sólo son usados para búsqueda de atributos, también pueden servir para búsquedas
de claves en diccionarios, búsqueda de índices y llamadas a funciones.
También existen los denominados filtros de plantillas que otorgan una forma de filtrar el valor
de una variable. Es posible encadenar tantos filtros como se desee.
Finalmente, Django usa el concepto de herencia de plantillas: eso es lo que hace por ejemplo
{ % extends "base.html" %}. Significa "Primero carga la plantilla llamada base, la cual tiene
algunos bloques definidos y rellénalos con los siguientes bloques". En otras palabras, permite
disminuir la redundancia en las plantillas: cada plantilla tiene que definir sólo lo que le es
propio.
Además permite crear múltiples versiones de un sitio, con diferentes plantillas base, reusando
las plantillas hijas. Los creadores de Django han usado esta técnica para crear ediciones para
dispositivos móviles notablemente distintas de algunos sitios, simplemente creando una nueva
plantilla base.
No es extrictamente necesario usar el sistema de plantillas de Django. Aunque este sistema
de plantillas está particularmente bien integrado con la capa de modelo de Django, no es
obligatorio usarlo. Por la misma razón, tampoco es necesario usar la API de base de datos
que proporciona Django. Es posible utilizar otra capa de abstracción de datos, es posible leer
archivos XML, leer archivos desde el disco, o lo que se quiera. Cada pieza de Django, modelos,
vistas, plantillas, está desacoplada del resto.
Un ejemplo de plantilla se muestra a continuación:
{% i f l a t e s t _ p o l l _ l i s t %}
<ul>
{% f o r p o l l i n l a t e s t _ p o l l _ l i s t %}
< l i> <a href="/ p o l l s /{{␣ p o l l . i d ␣}}/">
{{ p o l l . q u e s t i o n }}</a></ l i>
{% end f o r %}
</ul>
{% e l s e %}
<p>No p o l l s a r e a v a i l a b l e .</p>
{% en d i f %}
55
3.4. FFMPEG. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
3.4. FFmpeg.
FFmpeg es una colección de software libre que puede grabar, convertir y hacer streaming de
audio y vídeo. Está desarrollado en GNU/Linux, pero puede ser compilado en la mayoría de
los sistemas operativos, incluyendo Windows, por lo que es multiplataforma. Su última versión
estable es la 0.6.2 lanzada el 23 de marzo de 2011. Está escrito en C y está liberado bajo
licencia LGPL (GNU Lesser General Public License 2.1+) o GPL (GNU General Public License
2+).
El proyecto FFmpeg está compuesto por las siguientes herramientas:
• ffmpeg: es una herramienta de línea de comandos para convertir un vídeo de un formato
a otro. También puede capturar y codificar en tiempo real desde una tarjeta de televisión.
• ffserver: es un servidor de streaming multimedia de emisiones en directo que soporta
HTTP (la compatibilidad con RTSP está en desarrollo). Todavía no está en fase estable.
• ffplay: es un reproductor multimedia basado en SDL (Simple DirectMedia Layer) y las
bibliotecas FFmpeg.
• libavcodec: es una biblioteca que contiene todos los códecs de FFmpeg. Muchos de
ellos fueron desarrollados desde cero para asegurar una mayor eficiencia y un código
altamente reutilizable.
• libavformat: es una biblioteca que contiene los multiplexadores/demultiplexadores para
los archivos contenedores multimedia.
• libavutil: es una biblioteca de apoyo que contiene todas las rutinas comunes en las
diferentes partes de FFmpeg.
• libpostproc: es una biblioteca de funciones de post-proceso de vídeo.
• libswscale: es la biblioteca de escalado de vídeo.
3.4.1. Sintaxis de la línea de comandos.
FFmpeg es un rápido conversor de audio y vídeo que además también puede grabar de una
fuente de audio o vídeo en vivo. Además, puede modificar la tasa del vídeo o redimensionar el
tamaño del vídeo al mismo tiempo que realiza la conversión.
56
3.4. FFMPEG. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
La interfaz de línea de comandos está diseñada para ser intuitiva, en el sentido de que FFm-
peg trata de averiguar todos los parámetros que posiblemente se pueden derivar de forma
automática. Por lo general, sólo tiene que especificar la tasa de bits que desee.
Como regla general en los comandos, las opciones se aplican al archivo especificado a conti-
nuación, por lo tanto, el orden es importante.
Por lo general, FFmpeg intenta convertir con las menores pérdidas posibles usando los mismos
parámetros de audio y vídeo del archivo de entrada a la salida, si estos no han sido especificados.
La sintaxis de los comandos FFmpeg es la siguiente:
ffmpeg [[infile options][’-i’ infile]]... {[outfile options] outfile}...
FFmpeg es la orden que ejecuta el programa. A continuación, se especifican las opciones para
el archivo de entrada. Tras un -i se especifica la ruta al archivo de entrada. Finalmente, se
especifican tanto las opciones como la ruta y nombre del archivo de salida.
En las tablas siguientes se ha hecho un resumen de las opciones más importantes de los
comandos FFmpeg. En primer lugar, el cuadro 3.10 muestra las opciones genéricas, la cuáles
son comunes a todas las herramientas de FFmpeg.
Opción Función
-L Licencia-h Ayuda
-version Versión-formats Lista con los formatos compatibles-bsfs Flujos de bits disponibles
-protocols Protocolos compatibles-filters Filtros libavfilter disponibles
Cuadro 3.10: Opciones genéricas FFmpeg.
En el cuadro 3.11 se muestran algunas de las opciones principales de FFmpeg.
En los cuadros 3.12 y 3.13 se recogen las principales opciones de vídeo y de audio respectiva-
mente.
En los cuadros 3.10, 3.11, 3.12 y 3.13 se han recogido las principales opciones. Existen muchas
más, algunas de ellas más avanzadas, pero estas son las básicas que se tendrán que utilizar
para el objetivo de la aplicación.
57
3.4. FFMPEG. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO.
Opción Función
-f fmt Formato de salida-i filename Archivo de entrada
-y Sobreescribe los archivos de salida-t duration Duración del archivo de salida (en segundos)-fs size Tamaño de archivo límite
-ss position Busca el segundo del vídeo determinado por position-metadata key=value Metadato del archivo
Cuadro 3.11: Opciones principales de FFmpeg.
Opción Función
-b bitrate Tasa de bits del vídeo-vframes number Número de datagramas de video a grabar
-f fps Tasa de datagramas-s size Tamaño del datagrama de vídeo
-aspect aspect Tasa de aspecto-bt tolerance Tolerancia en la tasa de bits
-maxrate bitrate Máxima tasa de bits-minrate bitrate Mínima tasa de bits-vcodec codec Fuerza el códec con el que codificar
-sameq Utiliza la misma calidad de vídeo que la del archivo fuente-pass n Número de pasos (1 o 2)
Cuadro 3.12: Opciones de vídeo de FFmpeg
Opción Función
-aframes number Número de tramas de audio a grabar-ar freq Frecuencia de muestreo
-ab bitrate Tasa de bits-aq q Calidad del audio
-ac channels Número de canales-an Deshabilita la grabación del audio
-acodec codec Códec de audio con el que codificar
Cuadro 3.13: Opciones de audio de FFmpeg
58
Top Related