Capítulo 3 Herramientas de desarrollo.bibing.us.es/proyectos/abreproy/11989/descargar_fichero/5.+Capítulo+3.pdf3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO

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


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


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


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


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


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


• 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.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


• 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


• 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


• 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


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


<object width="560" height="349"><param name="movie "value=" ht tp ://www. youtube . com/v/wbwVsHxLPYo? v e r s i o n=3&amp ; h l=es_ES&amp ; 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&amp ; h l=es_ES&amp ; 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


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


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


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


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


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


• 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


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.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


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.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


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


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


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


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

Documents

Capítulo 3 Herramientas de desarrollo.bibing.us.es/proyectos/abreproy/11989/descargar_fichero/5.+Capítulo+3.pdf3.2. EL ESTÁNDAR HTML 5. CAPÍTULO 3. HERRAMIENTAS DE DESARROLLO