7. Desarrollo de aplicaciones multimedia.

Entornos de Usuario
7.
Desarrollo de aplicaciones multimedia
Desarrollo de aplicaciones
multimedia.
Dpt. Informática Univ. Valencia
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Índice
7.1
El sistema WWW y el lenguaje HTML...........................................................3
7.2
El lenguaje HTML...........................................................................................4
7.2.1. HTML 4.0 y otros estándares HTML............................................................5
7.2.2. Identificación y partes de un documento HTML ..........................................6
7.2.3. Formato del Texto .........................................................................................8
FORMATO DE PÁRRAFOS .........................................................................................11
ANIDAMIENTO DE CÓDIGOS ....................................................................................13
7.2.4. Listas............................................................................................................13
7.3.URL’s y Enlaces..................................................................................................15
7.3.1 URL’s ...........................................................................................................15
7.3.2 Enlaces..........................................................................................................16
7.4- Incorporación de imágenes ................................................................................18
7.4.2 Imágenes Enlace ...........................................................................................19
7.4.3 Tamaño de Imágenes ....................................................................................20
7.4.4 Imágenes GIF ...............................................................................................20
7.5.- Tablas ................................................................................................................22
7.6.- Tipos MIME e inclusión de otros medios. ........................................................25
7.6.2 Inclusión de otros medios en un documento HTML. ...................................26
7.7 Frames (Marcos)..................................................................................................27
7.7.2 Definición de Marcos ...................................................................................27
7.7.3 Especificación del Contenido de los Marcos................................................28
7.8. Fomularios y CGI: Comunicación con el servidor............................................31
7.8.1 Formularios...................................................................................................31
7.8.2 Reglas de Codificación de los Datos (Codificación URLENCODED)........32
7.8.3 Elementos de los Formularios ......................................................................32
7.8.2 CGI’s ............................................................................................................35
7.9.- Imágenes sensibles (Mapas de imágenes).........................................................38
7.9.2 Imágenes Sensibles Procesadas en el Servidor Web....................................38
7.9.3 Imágenes Sensibles Procesadas en el Cliente Web ......................................42
7.10.- Introducción al lenguaje JAVA.......................................................................45
7.10.2 Características del Lenguaje Java...............................................................45
7.10.3 Los applets en JAVA..................................................................................47
7.11 JavaScript ..........................................................................................................49
7.11.2 Inclusión de JavaScript en HTML..............................................................50
7.11.3 Sintaxis Básica JavaScript..........................................................................51
7.11.4 Funciones en JavaScript .............................................................................53
7.11.5 Modelo de Objetos en JavaScript. ..............................................................53
7.11.6 Ejemplos JavaScript. ..................................................................................60
Dpt. Informática Univ. Valencia
2
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Como hemos comentado respecto al desarrollo de interfaces de usuario, también el
desarrollo de aplicaciones multimedia puede efectuarse desde diferentes niveles.
En el primer nivel, el desarrollador sería un programador que hace uso de librerías de
funciones para acceder a los formatos y dispositivos multimedia. En este nivel es
posible entrar en detalles como la edición y representación de partes de un fichero, la
sincronización de los diferentes dispositivos, etc. Por ejemplo, el conjunto de funciones
de desarrollo sobre MS-Windows ha sido extendido con librerías de funciones que
incluyen funciones de bajo nivel (Multimedia Control Interface -MCI-) y funciones de
alto nivel para ejecutar animaciones, video o sonido desde el código de un programa.
En un segundo nivel tendríamos la posibilidad de especificar el contenido de la
aplicación multimedia mediante un lenguaje de especificación, de la misma manera
que los ficheros de especificación de recursos se utilizan en los interfaces de usuario.
Estos lenguajes se utilizan a veces de forma combinada con la programación (nivel 1) o
con herramientas de diseño interactivo (nivel 2). El lenguaje puede servir para describir
los elementos del interface multimedia y su apariencia gráfica, igual que sucede con las
herramientas de diseño de interfaces, pero también para especificar qué acciones se van
a efectuar y cómo se producen los enlaces entre diferentes documentos de nuestra base
de datos multimedia. Un ejemplo del segundo tipo de utilización sería el lenguaje
OpenScript que acompaña al entorno de desarrollo Toolbook, y es complementado con
herramientas gráficas de diseño.
Otro ejemplo, ampliamente conocido y utilizado, es el lenguaje HTML, que incluye el
soporte para el desarrollo de aplicaciones multimedia distribuídas en la red dentro del
sistema WWW (World Wide Web) y acceso a diferentes servicios de Internet. Dada su
facilidad de creación y su amplia difusión, nos dedicaremos en detalle a examinar este
lenguaje y su utilización.
El tercer nivel de desarrollo hace uso de herramientas gráficas para diseñar la apariencia
de la aplicación y componentes CASE para generar el código o el lenguaje de
especificación. Como se ha indicado, es frecuente combinar estas herramientas con la
manipulación directa de librerías o el lenguaje de especificación. Por ejemplo, existen
multitud de herramientas para la generación automática de documentos HTML
pudiendo ver la apariencia final del documento, sin tener que utilizar los engorrosos
códigos de texto del lenguaje.
7.1
El sistema WWW y el lenguaje HTML
El sistema World Wide Web (WWW) está basado sobre una arquitectura clienteservidor. Los servidores gestionan como recursos documentos escritos en lenguaje
HTML que generan documentos con capacidad multimedia, y además cualquier otro
tipo de fichero y servicio de Internet al que se invoque desde estos documentos
(transmisión de ficheros, correo electrónico, etc.). Los programas servidor funcionan en
máquinas conectadas a la red Internet (y a otras redes, como Infovía), y pueden
proporcionar servicios mediante el protocolo de transmisión http (HyperText Transfer
Protocol) a clientes que estén preparados para leer e interpretar documentos en HTML.
Dpt. Informática Univ. Valencia
3
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Los más conocidos de estos programas clientes son las diferentes versiones de Netscape
y Mosaic.
Vamos a examinar con detenimiento las características del lenguaje HTML, dando
todos los elementos necesarios para desarrollar documentos susceptibles de ser
colocados en el sistema de archivos de un servidor WWW para su distribución. Hemos
de hacer notar que la rápida expansión de HTML y las múltiples versiones de
programas servidores y clientes hacen que frecuentemente haya funciones no
soportadas. Intentaremos hacer una separación entre las funcionalidades más
comúnmente soportadas, y las extensiones que pueden presentar problemas.
7.2
El lenguaje HTML
HTML (HyperText Markup Language) es, como su nombre indica, un lenguaje basado
en marcas (etiquetas, directivas o tags) para la especificación de documentos que
aprovechan el protocolo de transmisión de hipertexto (http) del WWW. Se trata de una
aplicación particular del SGML (Standard Generalized Markup Language, una
especificacion general para lenguajes basados en marcas -ISO 8879:1986).
Los documentos HTML tienen un formato de texto plano (ASCII) y se pueden crear
usando cualquier editor de textos. Por lo tanto, no es necesaria ninguna herramienta de
programación, compilador ni similares; únicamente necesitaremos un sencillo editor de
textos, un programa de tratamiento de imágenes (para retocar las imágenes de nuestras
páginas) y un programa cliente para visualizar las páginas, como el Netscape. Para
especificar la apariencia de la información que se desea mostrar, se parte de la base de
un documento ASCII con los contenidos de la información que va a incluir la página, y
posteriormente se da formato a los mismos usando códigos o directivas especiales que
regulan su apariencia. Estos códigos o directivas tienen un aspecto especial: están
encerrados por los símbolos ‘<’ y ‘>’.
En la especificación del HTML existen numerosos códigos de formato, que
normalmente se usan por parejas delimitando la parte del documento que se ve afectado
por su acción. En estos códigos que van por parejas, el código que indica el inicio del
formato es el mismo que el que indica el final; la única diferencia es que en el código
que marca el final se antepone una barra ‘/’ al cuerpo del código, como por ejemplo:
<I> Este texto sale en cursiva </I>
No todos los códigos van emparejados; existen algunas acciones de formato que sólo
tienen efecto en el lugar en el que se incluyen, o desde el lugar donde aparecen hasta el
final del documento. En este caso sólo será necesario un único código de formato, como
en el caso de <P>, que aunque existe su par </P>, no tiene ningún efecto y sólo se
incluye con el fin de lograr una cierta uniformidad.
Hay que indicar que es indiferente poner los códigos en mayúsculas o en minúsculas,
aunque es recomendable el uso de mayúsculas para facilitar la lectura del documento
HTML y el reconocimiento de los códigos. También se debe recordar que los espacios,
retornos de carro, tabuladores, etc, no tendrán ningún efecto sobre el formato del texto,
ya que son ignorados por el HTML.
Dpt. Informática Univ. Valencia
4
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Así pues, una gran parte del dominio del HTML radica en conocer los diferentes
códigos disponibles, y una vez conocidos es bastante sencillo diseñar páginas Web muy
atractivas.
Sin embargo, hay que tener en cuenta que no todos los códigos son estándar, existen
muchos códigos que sólo son reconocidos por determinados clientes Web. Si un
determinado cliente no reconoce un código, simplemente lo ignora.
Existen programas para diseñar páginas web de forma gráfica, como Macromedia
dreamweaver o FrontPage entre otros muchos, que nos permiten no tener que recordar
todas las etiquetas HTML y ver el aspecto final de la pagina conformo se va diseñando.
Sin embargo, es necesario aprender los fundamentos y los códigos básicos del HTML,
con el fin de comprender perfectamente el proceso de visualización de las páginas Web.
7.2.1. HTML 4.0 y otros estándares HTML.
Desde la aparición de HTML se han ido produciendo cambios en su especificación,
dando lugar a diferentes versiones. Hasta Enero de 1997, HTML 2.0, introducido por el
World Wide Web Consortium (W3C), fue el estándar más actualizado disponible. La
especificación de HTML 2.0 describía las capacidades soportadas por la mayoría de los
navegadores que existían hasta 1994.
Antes de que HTML 2.0 fuera publicado, ya se estaba trabajando en la especifiación de
la siguiente versión conocida como HTML 3.0. Sin embargo, las compañías dominantes
creadoras de navegadores no se pusieron de acuerdo y los diferentes navegadores no
soportaban todas las especificaciones de esta versión, por lo que apareción una versión
intermedia HTML 3.2, que en contra de lo que su nombre indica, tenía menos
características que su predecsora.
En Diciembre de 1997 finalmente apareció HTML 4.0 que se convirtió en el estándar.
Los navegadores actuales no soportan completamente todas las especificaciones de esta
versión, sin embargo, Netscape 4.0 y posteriores, así como Internet Explorer 4.0 y
posteriores, son los que más se ajustan a las mismas. Comparada con HTML 3.2 los
principales cambios que incluye la versión 4.0 son:
•
•
•
•
Inclusión de marcos en el documento.
Preferencia por las hojas de estilo en lugar de los elementos para dar formato al
texto.
Mejora del alineamiento de celdas y agrupamiento de columnas/filas en tablas.
Eventos de ratón y teclado para casi todos los elementos.
Posteriormente el W3C introdujo HTML 4.01 que se limitaba a corregir algunos errores
de la versión anterior. Esta versión fue aceptada en Diciembre de 1999.
La nueva especificación, XHTML 1.0 (Extensible HyperText Markup Language)
diseñada para soportar XML en las páginas web se basa en la versión 4.01 de HTML.
Dpt. Informática Univ. Valencia
5
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Se pueden consultar las diferente versiones en la página oficial del W3C:
http://www.w3.org/
7.2.2. Identificación y partes de un documento HTML
Algunos clientes Web identifican el tipo de documento examinando la extensión del
archivo solicitado. Otros lo hacen examinado el principio de la información recibida en
busca de identificadores estándar. Para simplificar las cosas a los clientes Web.
Indicaremos de forma explícita que el documento es de tipo HTML. Para ello
emplearemos los códigos <HTML> y </HTML> al principio y al final del archivo,
respectivamente.
Todo documento HTML consta de dos partes fundamentales: la cabecera y el cuerpo.
La cabecera se suele utilizar para establecer el título de la ventana y otras informaciones
sobre el contenido de la página, y el cuerpo para diseñar el resto de la página. Se
considera cabecera todo lo que está delimitado por los códigos <HEAD> y </HEAD>.
El título se indica usando los código <TITLE> y </TITLE>, especificando un texto
llano sin códigos HTML de formato. Es muy importante poner un título a la página,
puesto que si algún usuario decide incluirla en su lista de bookmarks será el título lo que
se almacene en la lista. Si no se especifica un título, lo que se almacenará en la lista será
la dirección de la página.
<HTML>
<HEAD>
Encabezad
</HEAD
<BODY>
Cuerpo
</BODY>
</HTML
Texto
ASCII
FIGURA 7.1 FORMATO BÁSICO DE UN DOCUMENTO HTML
Dpt. Informática Univ. Valencia
6
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Además del titulo dentro de la cabecera del documento podemos incluir otras directivas,
orientadas a definir características generales del documento como directorios base para
busquedas de ficheros o datos del autor o software con que se produjo el documento.
Las más empleadas son:
<BASE HREF=”URL_base”> nos servirá para definir el directorio base para la
declaración de referencias relativas en nuestro documento.
<META> Esta directiva puede emplearse con dos funciones principales: dar
información acerca del autor del documento y las palabras clave a buscar por sistemas
de busqueda de información en servidores WWW y la otra para utilizarla como
temporizador que pasado un cierto tiempo cambie el cotendio del browser por otro
documento o cargue de nuevo el documento actual para actualizar ciertos cambios que
se produzcan periodicamente.
El uso en el primer caso seria:
<META NAME=”autor de pagina” CONTENT=”palabras clave
para busqueda”>
En cuanto al otro uso:
<META HTTP-EQUIV=”refresh” CONTENT = ”10;
URL=pagina_siguiente” >
con esto conseguiriamos que despues de 10 segundos de mostrarse este documento se
cargase el documento indicado en URL_siguiente.
El cuerpo del documento HTML se especifica usando los códigos <BODY> y
</BODY>. Dentro de este espacio incluiremos toda la información que se desea
mostrar en la página Web, aplicándole los códigos de formato necesarios.
La etiqueta BODY tiene una serie de atributos que nos permiten modificar el aspecto
general de la página:
•
Páginas con Imagen de Fondo
Podemos utilizar una imagen en formato GIF o JPEG como imagen de fondo de
una página Web, mediante el atributo BACKGROUND del código <BODY>:
<BODY BACKGROUND=”fondo.gif”>
Hay que indicar que las imágenes de fondo se deben de utilizar con cuidado, pues
ralentizan de forma notable la carga de las páginas, ya que es necesario establecer
una conexión HTTP para transferir la imagen de fondo. Además, algunas imágenes
no se verán igual en todos los clientes Web, pues pueden estar ejecutándose en
ordenadores con una paleta de colores más reducida, provocando que la página sea
difícil de leer.
•
Especificación de colores de fondo y texto
Dpt. Informática Univ. Valencia
7
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Podemos especificar un color de fondo utilizando el atributo BGCOLOR del
código <BODY>:
<BODY BGCOLOR=”#rrggbb”>
donde rrggbb es una tripleta de valores que especifica la intensidad de las
componentes roja, verde y azul del color deseado, expresado en hexadecimal.
Podemos especificar también el color del texto mediante otros atributos del código
<BODY>:
•
•
•
•
TEXT: Color del texto normal
LINK: Color de los enlaces
VLINK: Color de los enlaces visitados
ALINK: Color de los enlaces al activarse.
7.2.3. Formato del Texto
ENCABEZADOS DE SECCIONES
En el lenguaje HTML se definen seis niveles de encabezados, numerados del 1 al 6,
según tamaños decrecientes. Los encabezados aparecen usando tipos de letra más
grandes o enfatizados que el texto normal del documento, a excepción de los niveles 5 y
6, que normalmente aparecen con un tamaño inferior al del texto normal. Un aspecto a
tener en cuenta es que los encabezados son formatos lógicos y por lo tanto su apariencia
final dependerá de la configuración del cliente Web.
Los encabezados se especifican usando la siguiente sintaxis:
<Hn> Texto del Encabezado </Hn>
siendo n el número (del 1 al 6) que especifica el nivel del encabezado.
Dpt. Informática Univ. Valencia
8
Entornos de Usuario
Desarrollo de aplicaciones multimedia
FIGURA 7.2EJEMPLO DE ENCABEZADOS
Sería conveniente utilizar el código <H1> para el primer encabezado del documento, así
como el mismo contenido que hemos utilizado en el título de la página.
FORMATO DE CARACTERES
El interprete de HTML en general no respeta el formado con el que escribamos el
documento en tanto en cuanto saltos de línea, retornos de carro, etc son eliminados.
Para producir estos efectos utilizar directivas HTML definidas a tal efecto.
Existen dos tipos de estilo: lógico y físico. Con el estilo lógico se da formato al texto
según su semántica, mientras que con el estilo físico se especifica exactamente cuál
debe ser la apariencia final del texto.
Para comprender mejor la diferencia entre ambos estilos, veamos un ejemplo. Podemos
especificar que una determinada frase es una definición (estilo lógico). Cada
visualizador en particular asignará una apariencia concreta a este estilo, aunque en la
mayoría de los casos la frase aparecerá en cursiva. En cambio, podemos indicar
directamente que la frase debe aparecer en cursiva (estilo físico).
El estilo lógico permite una mayor flexibilidad, aunque funcionalmente ambos estilos
sean idénticos. Esto es debido a que el estilo lógico permite al usuario indicar al cliente
Web cómo desean ver determinados elementos de la página, personalizando de este
modo la apariencia final de los documentos.
Dpt. Informática Univ. Valencia
9
Entornos de Usuario
Desarrollo de aplicaciones multimedia
A continuación se muestran los distintos códigos de formato de caracteres, divididos
entre formatos lógicos y físicos.
Nombre/Tipo
Códigos
negrita
<B> ... </B>
cursiva
<I>...</I>
subrayado
<U>...</U>
teletipo
<TT>...</TT> (fuente fija)
tachado
<STRIKE>...</STRIKE>
letra grande
<BIG>
letra pequeña
<SMALL>
subíndice
<SUB>
superíndice
<SUP>
Formatos Físicos
Nombre/Tipo
Códigos
cita
<CITE>...</CITE>
código
<CODE>...</CODE>
definición
<DFN>...</DFN>
énfasis
<EM>...</EM>
ejemplo
<SAMP>
grueso
<STRONG>...</STRONG>
palabra clave
<KEY>...</KEY>
variable
<VAR>
Formatos Lógicos
Dpt. Informática Univ. Valencia
10
Entornos de Usuario
Desarrollo de aplicaciones multimedia
CARACTERES ESPECIALES
Existen caracteres especiales con un significado especial en el lenguaje HTML, y que
no pueden incluirse directamente en el texto. Para poder incluir estos caracteres
especiales en el texto utilizaremos unos códigos especiales precedidos por el símbolo
‘&’. Estos códigos se denominan secuencias de escape, y entre ellos están las
secuencias que representan algunos caracteres españoles.
Secuencia Escape
á
é
í
ó
ú
ñ
<
>
&
"
à
ç
&nbsp
Carácter
á
é
í
ó
ú
ñ
<
>
&
“
á
ç
espacio
TABLA 7.3 CODIGOS ESPECIALES
Las secuencias de escape deben figurar siempre en minúsculas y acabar en punto y
coma, aunque algunos visualizadores obtengan el mismo resultado sin el punto y coma.
En general cualquier carácter que se desee puede expresarse en esta forma o haciendo
uso de su codio latin1 para ello el formato será sere: &#código latin1;.
TAMAÑO Y COLOR DE LAS FUENTES DE TEXTO
Mediante los códigos <FONT> y </FONT> y los atributos SIZE y COLOR podemos
cambiar el tamaño de las fuentes de texto en cualquier parte del documento:
<FONT SIZE=5 COLOR=”red”> Texto con fuente de tamaño 5
y color rojo </FONT>
El tamaño por defecto de las fuentes de texto es 3, pero se puede modificar de modo que
el cambio afecte a todo el documento. Para ello se utiliza el código <BASEFONT>,
que se debe colocar justo a continuación del código <BODY> del documento:
<BASEFONT SIZE=5>
Se puede especificar también el tamaño de una fuente relativo al tamaño de la fuente
base, anteponiendo los signos ‘+’ o ‘-‘ al valor del tamaño en el atributo SIZE del
código <FONT>.
Otra directiva interesante es <BLINK> </BLINK> que produce un texto intermitente.
FORMATO DE PÁRRAFOS
Hay un elevado número de programas clientes Web, y cada uno tiene sus limitaciones a
la hora de sacar el texto por pantalla, de manera que el texto que en algunos
Dpt. Informática Univ. Valencia
11
Entornos de Usuario
Desarrollo de aplicaciones multimedia
visualizadores ocupa una sola línea, en otros puede ocupar varias. Por lo tanto, vamos a
necesitar unos códigos especiales para predecir con exactitud cuál será la apariencia
final en el cliente de un párrafo de texto, ya que el HTML, como ya dijimos, ignora los
tabuladores, retornos de carro, etc. Mediante estos códigos seremos capaces de delimitar
un párrafo o incluir un retorno de carro. Algunos de estos códigos constan de un único
código que tiene efecto únicamente en el lugar donde se han insertado.
Veamos cuáles son los códigos no pareados para dar formato al párrafo:
Párrafo <P>: Indica dónde termina un párrafo, y su efecto es que se introduce una línea
en blanco entre el párrafo que precede a dicho código y el texto situado a continuación.
Retorno de Carro <BR>: Salta al principio de la siguiente línea, pero sin introducir
una línea en blanco para separar el texto anterior.
Línea Horizontal <HR>: Salta a la siguiente línea y dibuja una línea horizontal como
separador de bloques de texto. Los atributos de la línea pueden ser: WIDTH, ALIGN,
SIZE Y NOSHADE:
WIDTH: Permite indicar la anchura de la línea horizontal, ya sea mediante un
valor absoluto (número de pixels) o bien indicando un porcentaje de la anchura
de la ventana. Este último método es el más recomendado, ya que no vamos a
conocer de antemano la anchura de la ventana del cliente Web. Veamos un
ejemplo:
<HR WIDTH=75%>
<HR WIDTH=300>
ALIGN: Por defecto las líneas horizontales aparecen siempre centradas en el
cliente Web. El atributo ALIGN permite alinearlas a la derecha (RIGHT) o a la
izquierda (LEFT):
<HR WIDTH=60% ALIGN=RIGHT>
SIZE: Especifica el grosor de la línea en pixels.
<HR SIZE=3>
NOSHADE: Desaparece el sombreado de la línea, dándole un aspecto sólido.
Los códigos pareados para dar formato de párrafo son:
Preformato <PRE> y </PRE>: Indican que el texto entre ellos incluido debe aparecer
tal como aparece en el archivo HTML, respetando tabulaciones, espacios en blanco y
retornos de carro. El texto aparecerá representado mediante una fuente de tipo no
proporcional. Mediante estos códigos es posible construir tablas, aunque muy poco
vistosas.
Dpt. Informática Univ. Valencia
12
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Bloque de texto <BLOCKQUOTE> y </BLOCKQUOTE>: Permiten sangrar el texto
hacia la derecha, haciendo que éste aparezca como si fuera una cita textual o una
definición de especial relevancia. Los bloques de texto se pueden anidar.
COMENTARIOS
Se pueden introducir comentarios en el texto fuente HTML, para facilitar su
comprensión. Los comentarios tienen la forma:
<!- Comentario ->
ANIDAMIENTO DE CÓDIGOS
Se pueden utilizar códigos de formato de caracteres para modificar la apariencia de
otros códigos. Por ejemplo, para obtener un texto en negrita y en cursiva podemos
utilizar la siguiente combinación de códigos:
<B><I> Texto en negrita y en cursiva </I></B>
Lo que no podemos hacer es intercalar códigos de forma alterna, pues cada cliente Web
interpretará a su manera la combinación incorrecta de códigos, como en el siguiente
ejemplo.
<B> Texto con <I> formato </B> incorrecto </I>
En este ejemplo cabría esperar que la palabra “incorrecto” apareciera sin negrita y en
cursiva, pero con el Netscape sale en negrita y sin estilo cursiva.
7.2.4. Listas
Con el HTML también podemos organizar la información en forma de listas de
elementos. Existen tres tipos de listas: no numeradas, numeradas y listas de
definiciones. Al igual que con los elementos anteriores, tendremos dos códigos para
indicar el principio y el final del texto que se verá afectado por la operación. Además
será necesario indicar mediante un único código dónde empieza cada elemento de la
lista.
Listas no numeradas: Los códigos delimitadores son <UL> y </UL> (Unnumbered
List), y al principio de cada elemento usaremos <LI> (List Item).
Listas numeradas: Las delimitaremos con los códigos <OL> y </OL> (Ordered List).
Cada elemento lo indicaremos anteponiéndoles el código <LI>
Listas de definición: Los códigos delimitadores son <DL> y </DL>. Las listas de
definición constan de pares de elementos del tipo nombre-definición. En cada par
nombre-definición se utilizan dos códigos específicos: <DT> (Definition Term) se
antepone al nombre del término y <DD> (Definition Data) se antepone a la
correspondiente definición. En cualquier caso, el cliente Web sangra hacia la derecha la
parte correspondiente a las definiciones.
Dpt. Informática Univ. Valencia
13
Entornos de Usuario
Desarrollo de aplicaciones multimedia
FIGURA 7.4:EJEMPLOS DE LISTAS ORDENADAS Y NO ORDENADAS
Las listas se pueden anidar, aunque sean de diferentes tipos. Por ejemplo, una lista
numerada puede tener elementos que sean, a su vez, listas no numeradas. Si anidamos
listas no numeradas, cada nivel de anidamiento tendrá un tipo de viñeta diferente.
Vamos a repasar también como podemos variar la forma de los elementos de una lista.
En el caso de las listas no numeradas podemos indicar la forma del punto que acompaña
a cada elemento de las lista para ello utilizamos el parametro TYPE en la directiva
<UL>, los tipos de los que disponemos son: DISC, SQUARE y CIRCLE (<UL
TYPE=”square”>.
En el caso de las lista numeradas podemos seleccionar el tipo de numeración deseada
utilizando el parametro TYPE. Podemos seleccionar entre numeración arábiga,
alfabetica (mayuscalas -TYPE=”A”- o minusculas -TYPE=”a”-) y romana (mayuscula TYPE=”I”- o minuscula -TYPE=”i” -).Pudiendose seleccionar también el indice de
comienzo de la lista con el parámetro START=”valor de inicio”. También es posible
asignar un determinado valor a un elmento utilizando VALUE en la directiva LI: <LI
VALUE=”valor a asignar”>.
Dpt. Informática Univ. Valencia
14
Entornos de Usuario
Desarrollo de aplicaciones multimedia
FIGURA 7.5:EJEMPLO DE LISTAS DE DEFINICIÓN Y ANIDADAS
Ademas de estos tipos de listas existen algunas extensiones similares en su función a las
definidas anteriormente pero en las cuales obtenemos como resultado listas más
compactas (menos separación entre elementos), se trata de las listas definidas con las
directivas <MENU> y <DIR>.
7.3.URL’s y Enlaces
7.3.1 URL’s
Parte de la potencia del lenguaje HTML radica en el hecho de que podemos crear
enlaces hipertexto de forma que hagan referencia a documentos situados en otros
servidores Web y dentro de nuestro propio servidor.
Para especificar la ubicación de los archivos situados en otros servidores utilizaremos
una notación especial: los URL (Uniform Resource Locator) o Localizadores
Universales de Recursos. Básicamente, un URL viene a ser la extensión del concepto de
nombre de archivo dentro de una red, aunque un URL permite acceder a una gran
variedad de recursos en la red.
Dpt. Informática Univ. Valencia
15
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Distintos tipos
de enlace
Enlace
Externo
Enlace Externo
otro servidor
Enlace
Intern
FIGURA 7.6 REPRESENTACIÓN DE CONFIGURACIÓN DE ENLACES
Los URL tienen la siguiente sintaxis:
servicio://nombre_servidor[:puerto]/ruta_acceso/nombre_
archivo
donde servicio especifica el tipo de servicio solicitado. El tipo de servicio indica al
cliente Web qué protocolo de comunicación debe utilizar para solicitar al servidor dicho
servicio. Para el caso de acceso a páginas Web se utiliza el protocolo HTTP, pero se
pueden gestionar otros servicios como ftp, news, gopher, wais y telnet, mail
(http://,ftp://,news:, gopher://, mailto:direcion de correo, etc.)
El puerto es un dato opcional que hace referencia al extremo lógico de conexión que usa
el servidor para la comunicación con el cliente.
En cuanto a las rutas de busqueda puntualizar que la forma de especificar los directorios
es la utilizada en los sistemas UNIX, luego aunque la máquina a utilizar sea un sistema
Windows o MS-DOS la barra a utilizar ser ‘/’.
7.3.2 Enlaces
Lo que hace realmente potente al lenguaje HTML es su capacidad para incorporar
enlaces hipertexto, permitiendo que los distintos objetos (texto, imágenes) estén
enlazados con otros documentos u objetos multimedia relacionados. El objeto que
constituye el enlace es resaltado por el cliente Web, utilizando colores y subrayado, con
el fin de resaltar el hecho de que son enlaces hipertexto.
Dentro de los enlaces distinguiremos dos tipos principales:
• Enlaces de Internos: Dentro de un mismo documento HTML. Nos serviran para
organizar la información dentro de un documento extenso.
• Enlaces Externos: se realizaran referencias a otros documentos que pueden estar en
la misma máquina o en otras maquinas.
Dpt. Informática Univ. Valencia
16
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Los enlaces hipertexto se incorporan en el documento fuente HTML por medio de unas
construcciones llamadas “anclas” (anchors). Existen dos tipos de anclas:
Anclas de referencia: Contienen la referencia del destino del enlace hipertexto
Anclas nominales: Sirven para especificar puntos específicos de un documento que
pueden ser referenciados usando anclas de referencia
Veamos con más detalle estos dos tipos de anclas.
Anclas de Referencia
Mediante los códigos <A> y </A> podemos indicar que una frase de texto o una imagen
es un enlace a otro punto. Deberemos indicar el destino del enlace formando parte del
código de inicio <A>, según se muestra a continuación:
<A HREF=”URL archivo destino”>
Veamos algunos ejemplos. El siguiente constituye un enlace hipertexto a un documento
llamado “acercade.html” localizado en el mismo servidor que el fichero que estemos
leyendo en ese momento. El texto que aparecerá resaltado es “Acerca del Autor”:
<A HREF=”acercade.html”> Acerca del autor </A>
Lo más conveniente para trabar con archivos que están en el mismo servidor es utilizar
rutas de acceso relativas, ya que simplifican cualquier cambio futuro que se haga
respecto a la ubicación de los documentos HTML. De esta forma, utilizaremos enlaces
como:
<A HREF=”cap1/acercade.html”> Acerca del autor </A>
<A HREF=”../acercade.html”> Acerca del autor </A>
para indicar un enlace a un archivo HTML situado en el directorio cap1 del directorio
actual o del documento existente en el directorio anterior.
Anclas de Nominales
Como hemos dicho antes, las anclas nominales especifican puntos de un documento a
los que se puede hacer referencia mediante enlaces hipertexto. Su función es asignar un
nombre o etiqueta al punto donde se encuentran, según la siguiente sintaxis:
<A NAME=”etiqueta”> Texto destino de otros enlaces </A>
Para hacer referencia a un punto de un documento al que se ha asignado una etiqueta
mediante un ancla nominal, utilizaremos un ancla de referencia con la siguiente
sintaxis:
<A HREF=”#etiqueta”> Texto del enlace </A>
Es posible hacer referencia a un ancla nominal de otro documento:
Dpt. Informática Univ. Valencia
17
Entornos de Usuario
Desarrollo de aplicaciones multimedia
<A HREF=”docu1.html#etiqueta1”> Texto del enlace </A>
donde “docu1.html” es otro documento en el mismo servidor y “#etiqueta1” es el ancla
nominal.
Por ejemplo para hacer referencia a un documento HTML en otra máquina:
<A HREF=”http://www.patan.eleinf.uv.es/IG/cap1.html” >
Puede interesarnos que la referencia aparezca en una ventana distinta a la ventana del
documento actual de forma que no perdamos el documento en el cual nos estamos
moviendo, para hacer esto podemos utilizar el parametro TARGET que nos permitirá
indicar que deseamos que se habrá un nuevo browser, el use seria:
<A HREF=”URL_destino” TARGET=”_blank” >
También podemos utilizar las anclas de referencia como base para enviar correo a una
determinada dirección:
<A HREF=”mailto:[email protected]·” > Enviarme correo a mi en [email protected]</A>
Con esto conseguiriamos que si el browser tiene asociado un editor de correo este se
habriese con la dirección especificada. Es conveniente poner también la dirección en el
link por si el cliente que estamos utilizando no tiene dicha aplicación.
7.4- Incorporación de imágenes
Existe un código HTML que nos permite incluir imágenes en las páginas de una forma
sencilla. La mayoría de los clientes Web permiten gestionar de forma especial las
imágenes almacenadas en archivos con formato GIF (Graphics Interchange Format).
Una de las ventajas del formato GIF es que comprime las imágenes para reducir el
tamaño de los archivos, siendo por tanto ideal para su transporte por la red, ya que será
menor e número de bytes que hay que leer cuando se acceda a una imagen de este tipo.
Algunos programas clientes permiten incluir imágenes de distintos tipos (JPG, XBM)
pero el estándar de momento es el formato GIF, por lo que es conveniente no usar otros
formatos con el fin de que nuestros documentos sean accesibles a la mayor parte de
clientes Web.
Para incluir una imagen en un documento utilizaremos el código:
<IMG SRC=imagen ALT=texto>
donde imagen es el URL que permite localizar la imagen, al igual que hacíamos con los
enlaces HREF. El atributo ALT permite especificar un texto descriptivo que se utiliza
cuando el cliente Web no es capaz de representar imágenes, como en el caso de Lynx.
Podemos establecer la alineación de las imágenes con el texto circundante mediante el
atributo ALIGN, que puede tomar los valores TOP, MIDDLE, BOTTOM, RIGHT y
LEFT permitiendo que el texto se sitúe arriba, en medio, abajo, a la derecha o a la
izquierda de la imagen respectivamente. Por defecto, el texto se alinea con la parte
inferior de la imagen.
Dpt. Informática Univ. Valencia
18
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Hay que tener en cuenta que al usar el atributo ALIGN sólo se ve afectada la primera
línea del texto circundante, así que deberíamos utilizar ALIGN únicamente cuando
queramos acompañar a la imagen de una breve descripción. Para lograr que varias
líneas de texto fluyan alrededor de una imagen deberemos utilizar algunas extensiones
no estándar que veremos más adelante.
Con los atributos WIDTH=x y HEIGHT=y podemos especificar el tamaño exacto de
la imagen en pixels. Esta extensión permite acelerar notablemente la representación de
las páginas en el cliente Web, pues ya no tiene que esperar a que termine la carga de las
imágenes para saber con exactitud cuánto sitio ocupan.
Con BORDER=valor podemos especificar el grosor del marco que se coloca alrededor
de la imagen.
Mediante HSPACE=x y VSPACE=y se define un marco invisible que rodea a la
imagen, con el fin de separarla del texto circundante.
Veamos un ejemplo de una imagen alineada a la izquierda, con un marco alrededor y
con un espacio de 30 pixels hasta el texto.
FIGURA 7.7: EJEMPLO DE UNA IMAGEN GIF INTEGRADA EN LA PÁGINA
El atributo LOWSRC=”baja_res.gif” nos permite incluir dos imágenes de distinta
resolución en el mismo espacio de la página. La imagen de baja resolución se indica con
LOWSRC, y la de alta resolución con SRC. Los clientes Web que no reconocen el
atributo LOWSRC, simplemente lo ignoran y cargan la imagen indicada en SRC.
El Netscape carga primero la imagen a baja resolución, y una vez haya terminado de
cargar todo el texto y las demás imágenes cargará la versión a alta resolución. Esto
permite una carga rápida en una primera fase, para pasar a mostrar las imágenes con
mayor calidad en una segunda fase.
7.4.2 Imágenes Enlace
Se pueden utilizar las imágenes dentro de un enlace, de manera que cuando el usuario
pinche sobre ellas, se procederá a saltar a otra página, imagen, vídeo, etc. De esta forma
Dpt. Informática Univ. Valencia
19
Entornos de Usuario
Desarrollo de aplicaciones multimedia
podemos incluir botones que simplifiquen la comunicación entre varios documentos al
mismo tiempo que embellecen la página. Veamos un ejemplo, en el que la imagen
“trian.gif” actúa como enlace de la página “salto.html”:
<A HREF=”salto.html”><IMG SRC=”trian.gif” ALT=”Volver”></A>
La imagen aparece por defecto rodeada por un borde que resalta su carácter de enlace.
7.4.3 Tamaño de Imágenes
El tamaño de las imágenes es un factor que influirá enormemente en el tiempo que
tarden en cargarse, y hay que tenerlo presente sobre todo cuando se disponen de enlaces
lentos o en conexiones vía módem. Para conseguir reducir el tiempo de carga de las
imágenes podemos tener en cuenta las siguientes consideraciones:
Reducir el tamaño físico de la imagen: al disminuir la altura y/o la anchura (en pixels)
de la imagen, conseguiremos reducir el tamaño del archivo, aunque no existe una
relación lineal entre ambos.
Reducir el número de colores: con esto conseguiremos reducir el número de bits
empleados en representar cada pixel, con lo que disminuye la cantidad de información a
almacenar (una imagen GIF puede usar hasta un máximo de 256 colores).
Reducir la complejidad de la imagen: Si utilizamos imágenes regulares con grandes
zonas de un mismo color, se podrá alcanzar un mayor grado de compresión, con lo que
el tamaño del archivo será menor. El formato GIF utiliza técnicas de compresión
basadas en la aparición de secuencias de datos (pixels del mismo color) repetidas en la
imagen.
De todas formas, podemos utilizar imágenes en otro formato como el JPEG, que fue
diseñado para almacenar imágenes con más de 256 colores. Este formato utiliza un
sistema de compresión basado en complejos cálculos matemáticos que permiten reducir
drásticamente el tamaño del archivo, a cambio de una disminución en la calidad de las
imágenes.
El problema es que no todos los clientes Web son capaces de usar archivos JPEG para
imágenes integradas, con lo cual tienen que utilizar programas externos para poder
visualizarlas. Una posible solución es utilizar imágenes GIF pequeñas integradas en el
documento que actúen como enlace a las versiones en tamaño natural.
7.4.4 Imágenes GIF
Existen dos formatos de imágenes GIF: el GIF87 y el GIF89a. Los clientes Web aceptan
ambos tipos de formato. El formato GIF89a tiene dos características muy interesantes:
Entrelazado: Permite almacenar la líneas de la imagen en cuatro grupos: el primero
contiene las líneas 1,5,9,...,el segundo la 2,6,10,... y así sucesivamente hasta llegar al
cuarto grupo. Esto permite que imagen se cargue de una forma más regular, y permite
hacernos una idea de la imagen global antes de ser cargada completamente.
Transparencia: Cuando en una imagen GIF hay definido un color transparente, el
cliente Web permite visualizar el color de fondo de la página en aquellas zonas en las
Dpt. Informática Univ. Valencia
20
Entornos de Usuario
Desarrollo de aplicaciones multimedia
que se use el color transparente, causando el efecto de una mayor integración en el
entorno de la página.
GIF Animados: Esto se consigue utilizando la posibilidad del formato GIF de incluir
varios bloques de imagenes en el mismo fichero, y visualizarlos de forma secuencial.
Para definir estos gifs se pueden utilizar programas especiales que perimiten enlazar
imagenes individuales en un gif animado. Estos programas posibilitan también
especificar el tipo de anición deseada: continuada, una sola ejecución, etc..
Dpt. Informática Univ. Valencia
21
Entornos de Usuario
Desarrollo de aplicaciones multimedia
7.5.- Tablas
Las tablas son uno de los elementos más útiles del HTML, permitiéndonos organizar los
datos de una manera muy vistosa. Hasta el momento, sólo unos pocos atributos son
comunes a todos los clientes Web, aunque son suficientes para crear tablas sencillas.
Veamos los códigos de formato más importantes relacionados con tablas.
Las tablas se definen utilizando los códigos <TABLE> y </TABLE>, y se componen
de filas dispuestas paralelamente cada una de las cuales puede ser dividida en un
número determinado de celdas. Para establecer tamaños de la tabla podemos utilizar los
parametros HEIGHT y WIDTH, los cuales pueden tomar valores en pixels o en
porcentaje de ventana.
El código <TR> determina una fila en la tabla.
Una celda se define mediante el código <TD>, y puede contener cualquier elemento
HTML: texto, imágenes, enlaces, etc.
Con el atributo BORDER=n del código TABLE podemos crear una tabla con líneas
separando las distintas celdas. Si especificamos un valor se modificará el grosor de las
líneas.
Encabezados <TH>: es igual que el atributo <TD>, sólo que el texto aparece resaltado.
Alineamiento horizontal: Por defecto el contenido de una celda está alineado a la
izquierda. Mediante el atributo ALIGN (que puede tomar los valores CENTER, RIGHT
y LEFT) de los códigos <TD>, <TH> (para celdas) y <TR> para filas, se puede cambiar
la alineación de los elementos de las celdas.
Alineamiento vertical: Mediante el atributo VALIGN de los códigos <TD>,<TH> y
<TR> (que pueden tomar los valores TOP, MIDDLE Y BOTTOM) podemos alinear los
elementos de una celda verticalmente.
Fusión de filas y columnas: Podemos fusionar las celdas de las filas y/o columnas. La
fusión de las celdas de varias columnas contiguas se indica mediante el atributo
COLSPAN=n de los códigos TD y TH, siendo n el número de columnas que se van a
fusionar en una sola celda.
La fusión de las celdas de varias filas contiguas se indica mediante el atributo
ROWSPAN=n de los códigos TD y TH. En este caso el valor n especifica el número de
filas que consume una determinada celda.
Separación entre celdas: Mediante el atributo CELLSPACING=n del código
<TABLE> podemos especificar el espacio que se debe insertar ente las celdas de una
tabla. Por otra parte, el atributo CELLPADDING nos permite especificar el espacio que
debe existir entre los bordes de cada celda y los elementos en ella incluidos.
Dpt. Informática Univ. Valencia
22
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Podemos darle un título a la tabla con el código <CAPTION> “Título” </CAPTION>.
Debe ir después del código <TABLE>, y aparecerá encima o debajo de la tabla según el
valor de ALIGN indicado (TOP o BOTTOM).
También se le puede asignar un color de fondo a la tabla, las filas o la celdas
individuales, utilizando el atributo BGCOLOR=”#rrggbb”, junto a la directiva deseada.
Existen muchos más atributos que incorporan algunos clientes como Netscape o
Explorer, pero con los que hemos visto hasta ahora tenemos suficiente para diseñar
tablas complejas.
Veamos un ejemplo con tablas:
<HEAD>
<TITLE> Ejemplo de una tabla </TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<TABLE BORDER CELLSPACING=5 CELLPADDING=5>
<CAPTION ALIGN=BOTTOM> Ejemplo de tabla </CAPTION>
<TR>
<TH>Encabezado1
<TH>Encabezado2
<TH>VALENCIA
<TR>
<TD COLSPAN=2 ALIGN=RIGHT> Derecha
<TD ROWSPAN=2 ALIGN=CENTER> <IMG SRC="logotipo.gif">
<TR>
<TD>Elemento1
<TD>Elemento2
</TABLE>
</BODY>
</HTML>
El resultado que produce este código es el de la página siguiente:
Dpt. Informática Univ. Valencia
23
Entornos de Usuario
Desarrollo de aplicaciones multimedia
FIGURA 7.8:EJEMPLO DE UNA TABA
Dpt. Informática Univ. Valencia
24
Entornos de Usuario
Desarrollo de aplicaciones multimedia
7.6.- Tipos MIME e inclusión de otros medios.
Los enlaces que hemos visto hasta ahora hacen referencia a otros documentos HTML,
ya sea en el mismo servidor o en uno remoto. Pero los enlaces HTML pueden apuntar a
muchas otras clases de archivos, incluyendo imágenes, sonidos, videos, animaciones,
escenarios virtuales, siendo el único requisito necesario que dichos objetos multimedia
se puedan almacenar en el disco local de la máquina en la que se ejecuta el cliente Web.
Para que esto sea posible es necesario disponer de unas aplicaciones externas (Helper
Applications) que permitan manejar tipos específicos de archivos recibidos por el
cliente Web. Nuestro cliente Web debe identificar el contenido de los archivos
multimedia y ser capaz de tratarlos mediante los programas externos. Esto se hace
asociando las posibles extensiones de los nombres de los archivos multimedia a unos
tipos estándar, que se denominan tipos MIME (Multipurpose Internet Mail Extensions).
Veamos algunos de los tipos MIME estándar:
Tipo
MIME
Image/Gif
Image/Jpeg
Image/Tiff
PostScript
Text/HTML
Sound/Au
Sound/Wave
Video/Mpeg
Video/AVI
Ext.
Estándar
.gif
.jpeg
.tiff
.eps .ps
.html
.au .snd
.wav
.mpeg
.avi
Ext. DOS
.gif
.jpg
.tif
.eps .ps
.htm
.au .snd
.wav
.mpg .mpe
.avi
TABLA 7.3:ALGUNOS TIPOS MIME ESTÁNDAR
Por lo tanto, la identificación del tipo MIME estándar se hace a partir de la extensión
del archivo recibido. Una vez que se conoce el tipo MIME, el cliente Web consulta una
tabla interna en la que se especifican las acciones a realizar cuando se recibe un
determinado tipo MIME. Esta tabla la define el usuario del cliente Web, indicando qué
aplicaciones externas o visores se deben activar para gestionar cada tipo MIME.
Veamos qué aspecto tiene en el cliente Netscape Navigator .
Dpt. Informática Univ. Valencia
25
Entornos de Usuario
Desarrollo de aplicaciones multimedia
FIGURA 7.9:LOS ARCHIVOS .RA, .RAM TIENEN ASOCIADO EL TIPO MIME
AUDIO/X-PN-REALAUDIO Y LA APLICACIÓN EXTERNA RAPLAYER
La ventaja que ofrecen las aplicaciones externas es la gran flexibilidad que va a tener un
cliente Web que las incorpore. De esta forma, el cliente Web podrá visualizar archivos
de Autocad, Postcript, Videos, etc, sin más que lanzar la aplicación que se corresponda
con el tipo MIME del archivo.
Los enlaces a objetos multimedia son idénticos a los de las páginas HTML, a excepción
de la extensión del archivo destino, que deberá tener la extensión apropiada. Por
ejemplo, veamos como se hace un enlace a un vídeo que se encuentra en un servidor
remoto:
<A HREF=”http://www.videos.com/videos/beach.avi”> Enlace a video
AVI remoto </A>
Cuando el archivo esté en nuestro disco local, se identificará su tipo estándar MIME a
partir de su extensión y se lanzará la aplicación que hayamos asociado en nuestro
cliente Web. Si el cliente Web no sabe qué aplicación externa debe utilizar, se ofrece la
posibilidad de guardar el archivo en disco para su posterior tratamiento.
7.6.2 Inclusión de otros medios en un documento HTML.
A parte de los visto anteriormente que posibilita hacer referencia a todo tipo de medios
a tráves de las extensiones MIME y poder visualizar esos medios en un visualizador
asociado a nuestro browser HTML, actualmente se están haciendo esfuerzos dirigidos a
posiblilitar una mejor integración de medios como sonido y video dentro del propio
documento HTML y que no sean otroas aplicaciones quienes deban visualizarlo. Para
ello el propio browser debe soportar el formato en cuestión. Se ha propuesto una nueva
Dpt. Informática Univ. Valencia
26
Entornos de Usuario
Desarrollo de aplicaciones multimedia
directiva para la introducción de estos medios se trata de <EMBED>. Esta directiva se
utiliza de forma similar a la utilizada para la inclusión de imagenes aunque acepta
parametros adicionales:
<EMBED SRC=”URL conteniendo el archivo del medio” >
Algunos de los parametros utilizables son: LOOP que puede ser TRUE o FALSE si
queremos que el audio o video se ejecute de forma ciclica. AUTOSTART que también
puede tomar los valores de true o false para indicar si la ejecución del archivo debe
comenzar automaticamento o no. CONTROLS para indicar si queremos que aparezca
un barra de controles para manejar la ejecución del archivo y algunos otros que se
pueden consultar en los manuales de referencia.
Por ejemplo la inclusion de un video QuickTime que comenzara su ejecución de forma
automatica y nos ofreciera una barra de controles quedaria como sigue:
<EMBED SRC=”mivideo.mov” AUTOSTART=”TRUE” CONTROLS=”TRUE”>
Pueden también emplearse argumentos como HSPACE y VSPACE para definir los
margenes entre la representación del medio y el resto del documento.
7.7 Frames (Marcos)
Los marcos son divisiones que se realizan de la página para mostrar en cada uno de
ellos una página HTML distinta y así maximizar la comunicación de la información.
Cada marco tendrá un URL determinado, así como sus propias barras de
desplazamiento.
Por ejemplo, podemos utilizar un marco estrecho para tener el índice de un documento,
mediante enlaces, y en la parte principal de la ventana cargaremos los contenidos de
esos índices.
7.7.2 Definición de Marcos
Los marcos cambian totalmente la estructura de página del HTML, eliminando la parte
del cuerpo <BODY> de la página y sustituyéndola por el código <FRAMESET>. Por lo
tanto, todos los códigos que debieran aparecer dentro del <BODY> ahora se incluirán
dentro de <FRAMESET>. La estructura básica de un documento en el que vamos a
definir marcos seguiría el siguiente esquema:
<HTML>
<HEAD>
<TITLE> Título de la ventana </TITLE>
</HEAD>
<FRAMESET>
Aquí se definen los marcos
</FRAMESET>
</HTML>
El código <FRAMESET> tiene dos atributos: COLS y ROWS:
Dpt. Informática Univ. Valencia
27
Entornos de Usuario
Desarrollo de aplicaciones multimedia
ROWS=”lista_de_valores”: especifica el número de marcos en los que se divide la
página y cuántas filas va a ocupar cada marco. Se puede expresar en números enteros,
en tantos por ciento (%) y con el valor ‘* ‘ que especifica que sea tan grande como la
ventana.
COLS=”lista_de_valores”: utiliza el mismo tipo de valores que ROWS para especificar
la longitud en columnas de los marcos
Ejemplos:
<FRAMESET COLS=”30%,70%”>
Define dos marcos que dividen verticalmente la ventana del cliente Web, ocupando
respectivamente el 30 y el 70 por ciento del ancho de la ventana.
<FRAMESET ROWS=”100, *, 80”>
Define tres marcos que dividen la ventana del cliente Web horizontalmente. En la parte
superior e inferior de la ventana se crean dos marcos de 100 y 80 pixels de altura
respectivamente, y el resto lo ocupará un marco central.
7.7.3 Especificación del Contenido de los Marcos
Para especificar el contenido de los marcos definidos con <FRAMESET> se utiliza el
código <FRAME>. Veamos los atributos que posee:
SRC=”nombre_documento”: nombre del documento que se quiere colocar dentro del
marco.
NAME=”nombre_ventana”: asigna un nombre a un marco, de forma que pueda ser el
destino de enlaces situados en otros marcos.
MARGINWIDTH=”valor”: especifica cuál es el margen lateral en pixels para evitar
que el texto de la página incluida se acerque al marco.
MARGINHEIGHT=”valor”: igual que el anterior pero delimitando el margen superior e
inferior.
SCROLLING=”yes | no | auto”: si un determinado documento es más largo que la
longitud del marco aparecen unas barras de desplazamiento que permiten visualizar
todo el documento. Mediante este atributo se pueden activar, desactivar o
automatizarlas para que sólo aparezcan cuando sea necesario (valor por defecto).
NORESIZE: evita que los marcos puedan ser aumentados o disminuidos mediante el
ratón arrastrando las barras que los separan
NOFRAMES: crea un contenido alternativo que sea visualizable por navegadores que
no poseen la opción de ver marcos.
Dpt. Informática Univ. Valencia
28
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Los visualizadores que no reconocen los marcos ignoran los códigos FRAMESET y
FRAME, por lo que interpretarán que el documento carece de contenido. Para que estos
visualizadores puedan leer la información, habrá que ponerla entre los códigos
<NOFRAME> y </NOFRAME>. En los visualizadores que sí reconocen los marcos, se
ignora la información incluida entre los códigos anteriores.
Los marcos se pueden anidar, lo que permite elaborar creaciones más complejas, en las
que la ventana del cliente Web se divide en marcos tanto a nivel horizontal como
vertical. Debemos tener cuidado al anidar marcos, pues la lectura de la página se puede
complicar bastante.
Veamos algunos ejemplos con marcos:
<HTML>
<HEAD>
<TITLE> Ejemplo de Frames </TITLE>
</HEAD>
<FRAMESET COLS=”20%, 80%”>
<FRAME SRC=”indice.html”>
<FRAME SRC=”cap1.htm” NAME=”main”>
</FRAMESET>
<!- En caso de que el visualizador no soporte frames ->
<NOFRAMES>
<A HREF=”cap1.htm”>Capítulo 1 </A><BR>
<A HREF=”cap2.htm”>Capítulo 2 </A><BR>
<A HREF=”cap3.htm”>Capítulo 3 </A><BR>
</NOFRAMES>
</HTML>
Este documento genera dos marcos, que ocupan el 20 y el 80 por ciento del ancho de la
ventana, respectivamente. El marco de la derecha recibe el nombre de “main”. Lo
siguiente que debemos hacer en crear el contenido del documento indice.html, donde
los enlaces apuntan al segundo marco (“main”), mediante el uso del atributo TARGET
del código HREF.
<HTML>
<HEAD>
<TITLE> Indice</TITLE>
</HEAD>
<BODY BGCOLOR=”FFFFFF”>
<H3 ALIGN=CENTER> INDICE </H3>
<A HREF=”cap1.htm” TARGET=”main”> Capítulo 1 </A><BR>
<A HREF=”cap2.htm” TARGET=”main”> Capítulo 2 </A><BR>
<A HREF=”cap3.htm” TARGET=”main”> Capítulo 3 </A><BR>
Dpt. Informática Univ. Valencia
29
Entornos de Usuario
Desarrollo de aplicaciones multimedia
</BODY>
</HTML>
Por último deberíamos crear los documentos correspondientes a cap1.html, cap2.html
cap3.html. Veamos el resultado en el cliente Netscape Navigator en la siguiente página.
FIGURA 7.10:EJEMPLO DE UTILIZACIÓN DE MARCOS
Ejemplo de marcos anidados:
<HTML>
<HEAD>
<TITLE> Ejemplo de Marcos anidados </TITLE>
</HEAD>
<FRAMESET COLS=”50%, 50%”>
<FRAMESET ROWS=”50%, 50%”>
<FRAME SRC=”doc.htm”>
<FRAME SRC=”doc.htm”>
</FRAMESET>
<FRAMESET ROWS=”33%,33%,33%”>
<FRAME SRC=”doc.htm”>
<FRAME SRC=”doc.htm”>
<FRAME SRC=”doc.htm”>
</FRAMESET>
</FRAMESET>
</HTML>
Dpt. Informática Univ. Valencia
30
Entornos de Usuario
Desarrollo de aplicaciones multimedia
FIGURA 7.11:EJEMPLO DE MARCOS ANIDADOS
Finalmente, debemos llevar cuidado con la recursividad, ya que si un enlace apunta por
error al documento de definición de marcos, cada vez que lo activemos la ventana se
subdividirá para definir nuevos marcos de forma indefinida.
Para evitar este problema, se han definido una serie de constantes NAME especiales,
que se pueden utilizar con el atributo TARGET de cualquier enlace.
_blank
_self
_parent
_top
carga el documento en una nueva ventana.
carga el nuevo documento sobre el actual.
carga el nuevo documento sobre el documento padre.
carga el nuevo documento en el nivel superior.
7.8. Fomularios y CGI: Comunicación con el servidor
7.8.1 Formularios
En el lenguaje HTML se define un mecanismo que permite un intercambio de
información directo entre el cliente y el servidor, y se llaman formularios o FORMS.
Mediante estos formularios, el usuario puede introducir información seleccionando
elementos, activando botones, escogiendo elementos de menús e introduciendo texto en
cuadros de diálogo.
Creación de Formularios
Los formularios se crean mediante los códigos <FORM> y </FORM>, y será necesario
introducir atributos especiales y otros códigos en el cuerpo del formulario. La sintaxis
para crear un formulario básico es la siguiente:
<FORM ACTION=“url_cgi o mailto:direccio e-mail” METHOD=método>
<INPUT TYPE= ..>
<INPUT TYPE=”submit”>
...
Dpt. Informática Univ. Valencia
31
Entornos de Usuario
Desarrollo de aplicaciones multimedia
</FORM>
El atributo ACTION sirve para especificar el URL del programa CGI (se comentarán
en el punto siguiente) que debe procesar los datos que envía el formulario, también se
pueden enviar dichos datos a una dirección de correo electrónico para su posterior
procesado en esta caso se especificaría mailto:dirección de correo. El atributo
METHOD se usa para indicar el método que se sigue para enviar la información de los
distintos elementos del formulario al programa CGI.
Existen dos métodos de envío: GET y POST. Si se usa el método GET, el programa
CGI recibe los datos en la variable de entorno QUERY_STRING, mientras que si se usa
el método POST, el programa CGI recibe los datos por la entrada estándar (stdin). El
contenido de QUERY_STRING y lo que recibe por la entrada estándar es una lista de
variables (campos del formulario) y valores introducidos por el usuario, que deberá
analizar el programa CGI.
El código <INPUT> especifica un campo de entrada en el formulario, que según el
valor que tome el atributo TYPE, será de un tipo u otro. Es obligatorio el uso de un
campo de entrada de tipo “SUBMIT”, que se representa como un botón que deberá
pulsar el usuario para validar el contenido del formulario e indicar al cliente Web que
envíe los datos al programa CGI. También existe un campo de entrada opcional, de tipo
“RESET”, que aparece como un botón que al pulsarlo inicializa el contenido de los
campos de entrada del formulario.
En todos los códigos INPUT, salvo en los de tipo “SUBMIT” o “RESET”, es
obligatorio el uso del atributo NAME, que especifica el nombre de la variable
correspondiente al elemento de entrada que estamos definiendo. Cuando se usa el tipo
SUBMIT o RESET, el código INPUT puede incluir un atributo VALUE en el que se
especifica el texto que aparece en los botones de envío o inicialización de datos,
respectivamente.
7.8.2 Reglas de Codificación de los Datos (Codificación URLENCODED)
Los datos introducidos en los campos de un formulario se envían al programa CGI con
el formato:
“variable_1=valor_1&variable_2=valor_2&...&variable_n=valor_n”
Si no se especifica ningún valor en el campo, la correspondiente cadena “&variable=”
no tendrá ningún valor asociado. En los valores introducidos por el usuario, los espacios
en blanco se sustituyen por el signo ‘+’ y si aparecen caracteres especiales
(“&”,”%”,”$”) se codifican usando el símbolo “%” seguido de dos dígitos que
expresan en hexadecimal su código ASCII. Por ejemplo, la cadena “&%$” se
codificaría como “%26%25%24”.
7.8.3 Elementos de los Formularios
•
Cuadros de entrada de texto: es el elemento por defecto, si no indicamos ningún
tipo. Se especifica con TYPE=”text”. Mediante el atributo SIZE del código INPUT
Dpt. Informática Univ. Valencia
32
Entornos de Usuario
Desarrollo de aplicaciones multimedia
podemos especificar el tamaño de un cuadro de entrada de texto. Por defecto, todos
los cuadros de entrada de texto tienen el mismo tamaño, aunque es posible
introducir tantos caracteres como se desee. Podemos limitar el número máximo de
caracteres que se pueden introducir mediante el atributo MAXLENGTH.
•
Cuadros de texto multilínea: mediante los códigos <TEXTAREA> y
</TEXTAREA> podemos introducir múltiples líneas de información. Por defecto,
TEXTAREA muestra un campo vacío de cuatro líneas de 40 caracteres de ancho.
Esto se puede cambiar usando los atributos ROWS y COLS, que especifican el
número de filas y anchura del campo en número de caracteres. Si se introduce texto
entre los códigos <TEXTAREA> y </TEXTAREA>, aparecerá como texto por
defecto en el cuadro de entrada. Es obligatorio el uso de NAME para indicar el
nombre de la variable asociada al texto del cuadro.
•
Cuadros de entrada de passwords: si al atributo TYPE del código INPUT le damos
el valor “PASSWORD”, tendremos una caja de entrada de texto en la que los
caracteres que introduce el usuario se ocultan usando asteriscos.
•
Casillas de verificación: con el valor TYPE=”CHECKBOX" del código INPUT
definiremos una casilla de verificación, que puede estar marcada o no. Es
obligatorio utilizar los atributos NAME y VALUE, para especificar el nombre de la
variable y el valor que toma ésta. Si una casilla no está marcada, no se envía
ninguna información al servidor. Si está marcada, se envía el nombre de la variable
y su valor. Si utilizamos varias casillas de verificación, una misma variable puede
tomar distintos valores.
•
Botones de radio: son elementos que operan conjuntamente: sólo puede estar
activado uno de ellos. Para especificar un botón de radio, se usa el código INPUT
con el tipo “RADIO”. Al igual que en el caso anterior, es obligatorio el uso de los
atributos NAME y VALUE. Obviamente, si utilizamos varias opciones con botones
de radio, deberán tener el mismo nombre de variable.
Si no se activa ningún botón, no se envía ningún valor, lo que puede causar
problemas al programa CGI. Para evitar esta situación, podemos asignar valores
por defecto, tanto en las casillas de verificación (en una o varias) como en los
botones de radio (sólo uno activo). Para marcar una casilla o activar un botón
utilizaremos el atributo CHECKED en el código INPUT.
•
Listas desplegables: los códigos <SELECT> y </SELECT> permiten mostrar
una lista de opciones usando un menú desplegable o un cuadro con una barra de
desplazamiento. Las opciones se incluyen entre los dos códigos anteriores,
usando el código <OPTION>, en el que se puede especificar el atributo VALUE
para indicar el valor que toma la variable para cada opción. Los atributos de
SELECT son los siguientes:
-NAME: Especifica el nombre de la variable y es obligatorio.
-SIZE: Determina el número de opciones visibles inicialmente. Si se omite este
atributo, o se indica el valor 1, las opciones aparecerán en un menú desplegable. Si
Dpt. Informática Univ. Valencia
33
Entornos de Usuario
Desarrollo de aplicaciones multimedia
se especifica un valor mayor o igual a 2, las distintas opciones aparecerán en un
cuadro con una barra de desplazamiento vertical. Si SIZE es mayor que el número
de opciones, aparecerán opciones vacías que se devolverán como un campo vacío
si el usuario las selecciona.
-MULTIPLE: Permite al usuario seleccionar varias opciones. Utilizando el atributo
SELECTED del código <OPTION>, podemos preseleccionar una o más opciones
(si hemos utilizado MULTIPLE).
Si no se utiliza el atributo VALUE del código <OPTION>, el valor que se envía al
servidor es el texto ofrecido al usuario, codificado de la forma indicada
anteriormente.
Veamos un ejemplo de formulario con algunos de los elementos estudiados hasta ahora.
<HTML><HEAD>
<TITLE> Ejemplos de las extensiones Netscape </TITLE>
</HEAD>
<BODY>
<H3> Varios elementos de los formularios </H3>
<FORM ACTION="form" METHOD="POST">
Nombre: <INPUT NAME="nombre">
DNI: <INPUT NAME="dni" SIZE=8 MAXLENGTH=8>
Teléfono: <INPUT NAME="tno" SIZE=10 MAXLENGTH=10><P>
Descripi&oacuten: <BR> <TEXTAREA ROWS=5 COLS=30 NAME="dec">
Introduzca la descripci&oacuten
</TEXTAREA><P>
Sexo:<BR>
<INPUT TYPE="RADIO" NAME="sexo" VALUE="hombre" CHECKED> Hombre
<BR>
<INPUT TYPE="RADIO" NAME="sexo" VALUE="mujer"> Mujer <P>
Opciones: <BR>
<INPUT
TYPE="CHECKBOX"
NAME="opcion"
VALUE="aire">Aire
acondicionado<BR>
<INPUT TYPE="CHECKBOX" NAME="opcion" VALUE="abs">Frenos ABS<BR>
<INPUT TYPE="CHECKBOX" NAME="opcion" VALUE="airbag">Airbag<P>
Coche: <SELECT NAME="coche">
<OPTION VALUE="ford"> Ford Fiesta
<OPTION VALUE="opel"> Opel Corsa
<OPTION VALUE="seat"> Seat Ibiza
<OPTION VALUE="fiat"> Fiat Bravo
</SELECT><P>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
<INPUT TYPE="RESET" VALUE="Borrar">
</FORM></BODY>
</HTML>
Dpt. Informática Univ. Valencia
34
Entornos de Usuario
Desarrollo de aplicaciones multimedia
FIGURA 7.12:EJEMPLO CON FORMULARIO
7.8.2 CGI’s
Una característica de todo lo que hemos visto hasta ahora es que la información real
sólo fluye en un sentido: del servidor al cliente Web (usuario final). No existe por lo
tanto ningún tipo de realimentación por parte del usuario: no es capaz de enviar
información al servidor.
Para permitir ese intercambio de datos del cliente al servidor se creó el CGI (Common
Gateway Interface), un interfaz que permite la existencia en el servidor de unos
programas o scripts capaces de recibir información de los clientes Web, procesarla y
devolver una página HTML con los resultados. Los programas CGI se utilizan
principalmente para hacer búsquedas en el servidor, para usar imágenes sensibles y para
procesar formularios. Podemos utilizar cualquier lenguaje de alto nivel para crear
programas CGI; los únicos requisitos son que debe ser capaz de leer datos de la entrada
estándar, acceder a las variables de entorno y escribir en la salida estándar.
Normalmente se programa con los lenguajes C y Perl.
Veamos un esquema del flujo de información cuando se utilizan programas CGI:
Dpt. Informática Univ. Valencia
35
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Flujo de datos ente el cliente
Web,
Datos
Servidor
Cliente Web
salida
Aplicación CGI
Datos
codificados
Decodifica datos
Procesa datos
Prepara la salida
FIGURA 7.13:FLUJO DE INFORMACIÓN USANDO PROGRAMAS CGI
Un programa CGI funciona de la siguiente manera:
El programa CGI recibe la información que le envían los clientes Web a través de
variables de entorno (método GET) o a través de la entrada estándar (método POST).
En ocasiones un programa CGI no necesitará recibir datos para cumplir con su función.
La información anterior se extrae adecuadamente del entorno o de la entrada estándar, y
se procesa según el propósito particular de cada programa CGI.
El programa CGI genera una página HTML que contiene los resultados que se desean
comunicar al usuario y la envía de vuelta al cliente Web.
Los programas CGI pueden procesar los datos de dos formas:
Procesamiento Directo: realizan el procesamiento de los datos sin recurrir a ningún
programa externo, como por ejemplo los cálculos matemáticos.
Procesamiento Indirecto: interactúa con otras aplicaciones que son las verdadereas
destinatarias de los datos recibidos. Un ejemplo lo podemos ver cuando realizamos una
consulta a un Sistema de Gestión de Bases de Datos desde un cliente Web. En este caso
el programa CGI actuaría meramente de intermediario entre el cliente Web y la
aplicación externa. Por eso los programas CGI a veces reciben el nombre de Gateways
o pasarelas.
7.8.2.2 Paso de Parámetros
Normalmente, el acceso a un programa CGI se produce cuando se envían los datos de
un formulario o de una imagen sensible, pero también se pueden usar enlaces que
acceden explícitamente al programa CGI. Para enviar información a un programa CGI
Dpt. Informática Univ. Valencia
36
Entornos de Usuario
Desarrollo de aplicaciones multimedia
se toma como base el URL de dicho programa, se añade un signo de interrogación ‘?’ y
a continuación se indican los parámetros o datos a enviar. Por ejemplo:
<A HREF=”/scripts/programa_cgi?datos”> Paso de parámetros al programa_cgi </A>
en este enlace el programa CGI recibe los datos en una variable de entorno llamada
QUERY_STRING, cuyo contenido será todo lo que viene a continuación del primer
signo ‘?’. La cadena que sigue al signo ‘?’ se codifica según el formato especial de
URLs: los espacios se sustituyen por el signo ‘+’ y los caracteres especiales se codifican
en hexadecimal, con el formato %xx. Esto último deberá tenerlo en cuenta el programa
CGI a la hora de extraer el contenido de QUERY_STRING. Otro ejemplo de uso de
CGI’s lo constituyen los contadores de acceso a una pagina, en este caso el CGI
devuelve una imagen con el numero de accesos a la pagina con aspecto similar a un
cuentakilometros. Para utilizar este CGI lo llamamos directamente como fuente de una
imagen:
<IMG SRC=http://www.lander.es/cgi/nph-count?link=mipagina&width=5>
donde nph-count es el cgi, link es uno de los parametros que contine un identificador de
la página y with es otro parametro donde se especifican el numero de digitos del
contador.
La otra forma de que un CGI reciba datos es a través de una recepción de llamada por
parte de un formulario. Como comentamos en el apartdo anterior el formulario
especificaba el método por el cual se envian los datos al CGI, esto podia ser a traves de
la variable de entorno QUERY_STRING, en el caso de que el método fuese el GET o
en la entrada estandar en el caso en que fuese enviado por el método POST. Es
recomendable utilizar el método POST porque en el caso de método GET tenemos
limitado el tamaño de datos a 1024K. En cualquier caso los datos serán recibidos con
codificacion urlencoded que ya comentamos anteriormente. Para saber el tamaño del
buffer de datos recibidos se debe consultar la variable de entorno
CONTENT_LENGHT. Después veremos un pequeño ejemplo en C que utiliza estas
variables para recibir la entrada de un formulario.
7.8.2.3 Envío de la Página Resultante
El programa CGI compone una página con los resultados y la envía al cliente Web, por
mediación del servidor. La forma que tiene el programa CGI de enviar la información es
simplemente sacar los datos por la salida estándar. El programa CGI deberá, además,
decirle al servidor el tipo de documento que va a devolver. Esto lo realiza el programa
CGI generando por la salida estándar una pequeña cabecera, que contiene dos líneas de
texto ASCII. En función de lo que devuelva, esta cabecera será de una determinada
forma.
Si se devuelve un documento generado por un programa CGI, la cabecera será de la
forma:
Primera línea: Content.type: tipo/subtipo
Segunda línea: (en blanco)
donde tipo/subtipo es el tipo MIME del documento devuelto. Si es una página HTML
este tipo será text/html , y si es texto ASCII llano será text/plain.
Dpt. Informática Univ. Valencia
37
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Si se devuelve una referencia a otro documento ya existente en el servidor local o en un
servidor remoto, la cabecera será:
Primera línea: Location: URL_doc
Segunda línea: (en blanco)
donde URL_doc es la vía de acceso del documento que queremos enviar.
7.8.2.4 Ejemplo CGI programado en C
Veamos un ejemplo de un sencillo programa CGI, cuya función recibir una entrada de
un formulario y devolver la entrada recibida en otra pagina HTML. Se veran dos
alternativas para tratamiento por metodo GET o por metodo POST. Para saber cual es el
método utilizado podemos emplear la variable de entorno REQUEST_METHOD
#include <stdio.h>
#include <stdlib.h>
void main(void)
{
char *contenido;
int longitud;
longitud=atoi(getenv(“CONTENT_LENGHT”));
contenido=(char *)malloc(longitud*sizeof(char));
if ((strcmp(getenv(“REQUEST_METHOD”),”POST”)==0)
{
gets(contenido);
}
else
{
strcpy(contenido,getenv(“QUERY_STRING”);
}
/***** Ya se han recogido lo datos ahora se podrían tratar en nuestro caso no
se va a tratar sino que simplemente generaremos un HTML que contenga lo
que hemos recibido***/
printf(“Content-type: text/html\n\n”) /*cabecera indicando documento HTML mas
salto de linea*/
printf(“<HTML><HEAD>”);
puts(“<TITLE> PRUEBA DE CGI </TITLE>”);
printf(“<BODY>”);
puts(“Esta ha sido la entrada recibida por el CGI en formato URLencoded:”);
puts(“<BR>”);
puts(contenido);
puts(“</BODY></HTML>);
}
7.9. Imágenes sensibles (Mapas de imágenes)
Algunas funciones de los programas CGI, como ya hemos visto, son la realización de
búsquedas en el servidor y el procesamiento de Forms. Otra de las utilidades de los
programas CGI es la incorporación de imágenes sensibles en las páginas Web, o sea
imagenes en las cuales podemos definir zonas que nos sirvan de enlance con otros
documentos o partes del documento. Vamos a ver que existen dos maneras de definir
este tipo de imágenes en la primera la imagen sensible es gestionada por el servidor
Web con la sobrecarga de comunicación que esto conlleva, en la segunda es el cliente el
que se encarga de la gestión del mapa de imagen.
7.9.2 Imágenes Sensibles Procesadas en el Servidor Web
Dpt. Informática Univ. Valencia
38
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Las imágenes sensibles son imágenes que contienen zonas activas que actúan como
enlaces; en función de la zona de la imagen en la que se pinche, se activa un enlace
hacia un documento u otro. Estas imágenes se pueden implementar utilizando
programas CGI.
Para crear una imagen sensible, se deben definir las zonas activas o sensibles, mediante
la especificación de rectángulos, círculos y otra clase de polígonos que cubran dichas
zonas. Después se almacenan en un archivo especial del servidor las coordenadas de
cada región activa y su correspondiente URL, necesario para acceder a la página a la
que esta asociada cada zona. Este archivo especial se denomina archivo-mapa de la
imagen.
Veamos cómo funciona todo esto: cuando el usuario pincha en un punto de la imagen,
se trasmiten las coordenadas de dicho punto al servidor, y éste las redirige al programa
CGI que gestiona las imágenes sensibles. El programa CGI consulta el archivo de mapa
y determina a qué zona activa pertenecen las coordenadas suministradas, tras lo cual
obtiene el URL asociado y devuelve al cliente Web el documento especificado en dicho
URL.
Casi todos los servidores ya disponen de un programa cuya función es gestionar
imágenes sensibles, por lo que normalmente no se necesitará crear el programa CGI.
Los más conocidos son el imagemap, del servidor NCSA, y el htimage, del servidor
CERN. Así pues, sólo será necesario crear el archivo-mapa de la imagen, e indicar en
un archivo de configuración del programa CGI dónde puede encontrar dicho archivomapa.
Coordenadas
Programa CGI
imagemap(NCSA)
htimage(CERN)
Coord
Redirección al URL
URL
Mapa de la Imagen
FIGURA 7.14.ESQUEMA DE FUNCIONAMIENTO DE UNA IMAGEN GESTIONADA POR EL SERVIDOR
La siguiente figura muestra un ejemplo de incorporación de una imagen sensible en un
documento HTML.
Dpt. Informática Univ. Valencia
39
Entornos de Usuario
Desarrollo de aplicaciones multimedia
FIGURA 7.15: IMAGEN SENSIBLE
A continuación analizaremos cuál debe ser el contenido del archivo mapa de la imagen.
Hay que indicar que no existe un formato estándar para este fichero, sino que los
métodos de definición de las zonas activas dependen del servidor concreto que estemos
utilizando. El formato que se describe a continuación es el empleado por el servidor
NCSA.
Las líneas del archivo mapa de la imagen tienen el siguiente formato:
método URL coord1 coord2 coord3 ... coordn
Dpt. Informática Univ. Valencia
40
Entornos de Usuario
Desarrollo de aplicaciones multimedia
donde URL es el URL que vamos a asignar a la zona activa que estamos definiendo.
Los parámetros coord representan las coordenadas de los puntos que definen la zona
activa, y el número de coordenadas depende del método que se utilice para definirla.
Existen tres métodos de definición de zonas activas, dependiendo de que la figura
geométrica utilizada sea un círculo, un rectángulo o un polígono. Así pues, las líneas del
archivo mapa de la imagen pueden ser de cualquiera de los tres tipos siguientes:
circle URL x1,y1 x2,y2 donde (x1,y1) son las coordenadas x e y del centro del círculo y
(x2,y2) son las coordenadas de un punto cualquiera de la circunferencia exterior.
rect URL x1,y1 x2,y2 donde (x1,y1) son las coordenadas x e y del vértice superior
izquierdo del rectángulo y (x2,y2) son las coordenadas del vértice inferior derecho.
poly URL x1,y1 x2,y2 ... xn yn donde cada pareja (x,y) representa un vértice del
polígono que puede tener un máximo de 100 vértices.
Un aspecto importante a considerar es que cada método se evalúa en el orden en que se
encuentran dentro del archivo-mapa de la imagen. Si se han definido zonas activas que
se solapan, como un círculo inscrito en un rectángulo, sólo se evalúa el primero de los
métodos aplicables.
Para comprender mejor todo lo visto hasta ahora realizaremos un ejemplo: supongamos
que deseamos convertir la imagen de la siguiente figura en una imagen sensible
integrada en una página HTML, de forma que al pinchar en uno de los botones se
acceda a un documento que contenga más información sobre el elemento al que hace
referencia.
FIGURA 7.16:IMAGEN SENSIBLE DE UN CUARTO DE BAÑO
En la figura podemos ver dos botones que vamos a definir como zonas activas. Lo
primero que hay que hacer es anotar las coordenadas de los botones. Como la zona
Dpt. Informática Univ. Valencia
41
Entornos de Usuario
Desarrollo de aplicaciones multimedia
activa correspondiente a los botones se puede definir usando rectángulos, sólo es
necesario conocer las coordenadas superior izquierda e inferior derecha de cada botón.
El siguiente paso es incluir la imagen sensible en el documento HTML:
<A HREF=/cgi-bin/imagemap/banyo.map
<IMG SRC=”bathroom.gif” ISMAP>
</A>
A continuación, tendremos que colocar el archivo banyo.map en el camino indicado.
Esto lo tendra que hacer el Webmaster o en su defecto darnos permiso para que lo
hagamos nosotros.
En el archivo banyo.map se definen los dos rectángulos correspondientes a las zonas
activas de la imagen, usando las coordenadas que obtuvimos anteriormente:
rect /medidas.html 65,230 170,255
rect /visita.html 194,230 293,255
default /defecto.html
El código default se utiliza para indicar una página por defecto, que es la página que se
entrega al cliente Web cuando el usuario no ha seleccionado ninguna de las zonas
activas.
Una posibilidad más avanzada consiste en ignorar la acción del usuario cuando éste ha
pinchado fuera de las zonas activas. Para ello será necesario hacer referencia a un
programa CGI, que solamente devuelva la cabecera:
HTTP/1.0 204 No Response
Content-Type: text/plain
Cuando el cliente Web recibe esta cabecera, entiende que el servidor no desea enviar
ninguna respuesta. El nombre del programa CGI deberá comenzar por nph-, lo que
indica al servidor que no debe analizar la cabecera (No Parse Header) y que debe
conectar la salida del programa CGI directamente con la entrada del cliente Web.
7.9.3 Imágenes Sensibles Procesadas en el Cliente Web
Procesar las imágenes en el servidor Web tiene dos grandes problemas. Es necesario
tener acceso al servidor para poder incluir imágenes sensibles, lo cual no siempre es
posible. Además, al utilizar imágenes-mapa, se está sobrecargando innecesariamente el
servidor, ya que deberá procesar todas las coordenadas que envían los clientes Web
como respuesta a las acciones realizadas por los usuarios.
Debido a estos problemas, hay técnica para el procesamiento de imágenes mapa
denominada client-side imagemaps. Básicamente, lo que se hace es definir en la misma
página HTML que contiene la imagen sensible todos los datos que permitan definir las
zonas activas de la misma. De esta forma, el procesamiento de la entrada del usuario se
realiza de forma local, con lo que solucionamos los dos inconvenientes antes
mencionados.
Dpt. Informática Univ. Valencia
42
Entornos de Usuario
Desarrollo de aplicaciones multimedia
La forma de definir este tipo de imágenes sensibles es utilizar el atributo USEMAP en
el código <IMG>. La sintaxis es la siguiente:
<IMG SRC=archivo-imagen USEMAP=nombre-mapa>
donde nombre-mapa se expresa con el mismo formato que los enlaces nominales. Por lo
tanto, podemos hacer referencia a un mapa definido en el mismo documento, de la
forma:
<IMG SRC=mapa.gif USEMAP=#mapa>
También podemos hacer referencia a otro documento HTML en el que se ha definido el
mapa:
<IMG SRC=mapa.gif USEMAP=mapas.html#mapa>
Este último formato nos permite guardar en un mismo fichero la información referente a
todos los mapas usados en los distintos documentos HTML, de forma que el
mantenimiento se simplifica mucho, ya que cualquier cambio en el contenido de las
imágenes sensibles sólo implica la actualización de un único fichero.
Podemos utilizar conjuntamente los atributos ISMAP y USEMAP, de forma que la
imagen sensible se pueda procesar localmente o, si no es posible, en el servidor.
El mapa correspondiente a la imagen sensible se define utilizando los códigos <MAP>
y </MAP>:
<MAP NAME=”nombre”>
<AREA SHAPE= “tipo de forma” COORDS=x1,y1,x2,y2 [HREF=”destino”]
[NOHREF]>
</MAP>
donde nombre es el nombre que recibe el mapa, y es el que se utiliza en USEMAP.
Para definir las zonas activas se utiliza el parámetro SHAPE que puede tomar los
valores rect, circle y poly, según se trate de un rectangulo, un circulo o un polígono
respectivamente, las coordenadas (x1,y1), (x2,y2) corresponden a la descripción de la
forma. En el caso del rectangulo serán la esquina inferior derecha, respectivamente. En
el caso del circulo, se utilizan sólo tres coordenadas x1,y1 que son el centro y una
tercera r que es el radio. Para el caso del polígono se utilizan tantos pares de
coordenadas como vertices lo definan.
El destino especifica el documento HTML al que se accede desde la correspondiente
zona activa. Hay que tener en cuenta que dicho destino es una especificación relativa al
URL del documento en el que se encuentra definido el mapa, que puede no ser el
documento que contiene la imagen sensible.
Por último, NOHREF indica que no se debe realizar ninguna acción si el usuario
selecciona una zona no definida. De todas formas, las zonas no definidas se consideran
de tipo NOHREF.
Dpt. Informática Univ. Valencia
43
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Consideremos ahora el mismo ejemplo anterior, pero en este caso procesando
localmente la imagen sensible. El documento HTML quedaría como sigue:
<HTML>
<TITLE > Imagen sensible procesada localmente </TITLE>
<BODY>
<IMG SRC=”bathroom.gif” USEMAP=”#banyo>
<MAP NAME=”banyo”>
<AREA SHAPE=”rect” COORDS=65,230,170,255 HREF=medidas.html>
<AREA SHAPE=”rect” COORDS=194,230 293,255 HREF=visita.html>
</MAP>
</BODY>
</HTML>
Dpt. Informática Univ. Valencia
44
Entornos de Usuario
Desarrollo de aplicaciones multimedia
7.10. Introducción al lenguaje JAVA
Hemos visto que los programas CGI permiten pasar parámetros entre formularios
definidos en lenguaje HTML y programas escritos en Perl o en C. El inconveniente del
CGI es que resulta muy incómodo de programar y es bastante pobre en sus
posibilidades.
En 1995, Sun Microsystems presentó un nuevo lenguaje de programación denominado
JAVA, que supuso una verdadera revolución en el diseño de sistemas de información
basados en la Web.
Java es un lenguaje de programación con el que se pueden desarrollar aplicaciones
normales como con C++ o cualquier otro lenguaje de tercera generación, por lo que no
es un lenguaje sólo para Internet. El proyecto JAVA, en un principio denominado OAK,
tenía como objetivo la creación de un lenguaje que permitiera solucionar los problemas
inherentes del desarrollo de aplicaciones distribuidas en redes con sistemas
heterogéneos. Sin embargo, una de las características diferenciales respecto a otros
lenguajes es que Java puede crear módulos de programa (applets) que se activan desde
cualquier página HTML. De esta forma, los clientes Web ya pueden acceder a
programas externos a través de la red para ejecutarlos localmente, aprovechando toda la
potencia del sistema local, y sin sobrecargar a los servidores.
Java es un lenguaje muy parecido al C++: tiene todas sus ventajas y ninguno de sus
inconvenientes. Esto es así porque C++ fue el punto de partida. El C++ es un lenguaje
flexible, potente, reusable, ideal para programadores, pero provoca con facilidad
problemas de corrupción y sobrecarga de memoria. En cambio Java es un lenguaje que
corrige los errores de C++ y extiende sus facultades.
7.10.2 Características del Lenguaje Java
Simplicidad
La sintaxis del lenguaje Java es muy similar a la de C++, con lo que se consigue que el
paso a la programación en Java no implique grandes cambios en los hábitos de
programación. Java simplifica en gran medida el desarrollo de aplicaciones, pues se han
omitido algunas de las características más conflictivas del lenguaje C++. Veamos
algunas de las principales diferencias ente Java y C++:
•
Se ha eliminado el preprocesador, con lo que desaparecen las directivas del tipo
#include. Esto implica la desaparición de los ficheros de cabecera (.h). En su
lugar se utilizan unas estructuras denominadas Interfaces, que permiten definir
los puntos de entrada a las clases sin ofrecer información detallada sobre la
implementación de las mismas.
•
No existe la herencia múltiple, aunque se puede lograr indirectamente usando
interfaces.
No existe la sobrecarga de operadores.
Se ha incluido un recolector de basura (garbage collector) automático, con lo
que no es necesario preocuparse de la gestión de memoria.
•
•
Dpt. Informática Univ. Valencia
45
Entornos de Usuario
•
•
•
Desarrollo de aplicaciones multimedia
No existen los punteros, lo que garantiza un descenso en el número de errores.
No existe conversión implícita de tipos (casting).
Incluye mecanismos de concurrencia basados en threads (hilos de ejecución o
flujos de control que comparten un mismo espacio de direcciones).
Orientado a Objetos
Java cumple con los requisitos necesarios para ser considerado un lenguaje de
programación orientado a objetos: Encapsulación, Herencia y Polimorfismo.
Distribuido
Java dispone de una extensa librería de rutinas que permiten utilizar diversos protocolos
como el TCP/IP, HTTP y FTP. Las aplicaciones Java pueden acceder a objetos de la red
mediante URLs, con la misma facilidad con que normalmente se accede a los ficheros
de un sistema local.
Lenguaje Compilado e Interpretado
Java es un lenguaje independiente del sistema operativo y del procesador que incorpore
la máquina utilizada. El código fuente escrito en cualquier editor ASCII se compila
generando un código objeto llamado formato binario de código byte. Este código
intermedio es de muy bajo nivel pero sin alcanzar las instrucciones máquina propias de
cada plataforma (aproximadamente el código byte corresponde al 80% de las
instrucciones de la aplicación). Ese mismo código se puede ejecutar desde cualquier
plataforma, para lo que hace falta un runtime completamente dependiente de la máquina
y del sistema operativo que interpreta dinámicamente el código de byte y añade las
instrucciones necesarias para su ejecución (el 20% restante).
Con este sistema es fácil crear aplicaciones multiplataforma, pero para ejecutarlas es
necesario que exista el runtime correspondiente al sistema operativo utilizado. El
compilador está escrito en Java y el runtime en ANSI C y soporta los tipos de datos
definidos en el IEEE, para que resulte portable a cualquier entorno.
Seguridad Integrada
Las aplicaciones de Java resultan muy seguras, ya que no acceden a zonas delicadas de
memoria o de sistema, con lo cual evitan la interacción de ciertos virus. Java no posee
una semántica específica para modificar la pila de programa o la memoria libre o
utilizar objetos y métodos de un programa sin los privilegios del kernel del sistema
operativo.
Concurrente
Java permite la concurrencia basada en multithreads (hilos de ejecución), lo que
constituye una poderosa herramienta para la mejora de la ejecución interactiva de las
aplicaciones gráficas.
Dpt. Informática Univ. Valencia
46
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Aplicaciones Java
Veamos un sencillo ejemplo de código fuente en Java. Se trata, como no, del típico
Hello World!
Class HelloWorld {
Public static void main (string args []) {
System.out.println (“Hello World!”);
}
}
El siguiente esquema resume el proceso seguido en el desarrollo y ejecución de
aplicaciones Java.
ByteCode
Fuentes
MiClase.java
MiProg.java
Compilador a
bytecode (javac)
MiClase.clas
s
MiProg.class
Máquina
Virtual Java
Ejecución
awt.dll
net.dll
io.dll
...
Librerías
Dinámicas
FIGURA 7.17 APLICACIÓN JAVA
7.10.3 Los applets en JAVA
En el mundo de Java existe un punto intermedio entre el usuario y el programador de
Java. Este lugar lo ocupa el desarrollador de páginas HTML que desea incluir la
funcionalidad y vistosidad de un programa Java en sus páginas pero no tiene tiempo o
ganas de aprender el lenguaje. Por este motivo, existen multitud de applets ya
desarrollados que se pueden encontrar en Internet y utilizar libremente (pertenecen a la
modalidad Freeware).
Los applets de Java son tratados por un visualizador de Web como cualquier otro tipo
de información como puede ser imagen, vídeo, audio, etc. El mecanismo es análogo al
de carga de una imagen. Cuando un browser detecta la etiqueta <APPLET> en el
código HTML del documento que ha recuperado, carga el fichero de clases con los
bytes-codes correspondientes. Una vez cargado procede a su verificación, con lo que se
comprueba que el código es legal y se ejecuta. El resultado de la ejecución se muestra
en la página Web como si de una imagen se tratara y, del mismo modo, el texto puede
fluir a su alrededor. La diferencia radica en que, ahora, la zona ocupada por el applet
será la zona de E/S del programa Java. De esta forma, el usuario será capaz desde
mostrar un texto a interactuar con el ratón y el teclado, directamente o a través de
botones, iconos, barras de desplazamiento, etc.
Para ver applets de Java es necesario utilizar un cliente Web que sea “Java
Compatible”. Estos clientes definen la máquina virtual Java y proporcionan el conjunto
de librerías de clases estándar necesarias para que el applet funcione. El resto de
clientes Web, al igual que ocurría con las extensiones no estándar de HTML,
simplemente ignorarán las etiquetas correspondientes y mostrarán el resto de la página.
Dpt. Informática Univ. Valencia
47
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Si tenemos en cuenta los aspectos sobre eficiencia, hay que indicar que el código
ejecutable debe ser trasmitido a través de la red, por lo que sería conveniente avisar en
la página de que posee applets Java. Por otra parte, durante el arranque, el applet puede
cargar otros recursos, como muestras de audio, vídeo, imágenes, más código ejecutable,
lo que retrasará aún más su aparición en pantalla, por lo que nunca hay que olvidar que
todos los recursos se van a transmitir a través de Internet.
Inclusión de un Applet en una Página Web
Para incluir un applet en una página Web utilizaremos el código <APPLET>. Para
facilitar parámetros a un applet (que al fin y al cabo es un programa ejecutable) se
utiliza el código <PARAM>. Estos códigos no son estándares, por lo que serán
ignoradas por aquellos browsers que no sean “Java compatibles”. La sintaxis es la
siguiente:
<APPLET CODE= WITH= HEIGHT= [CODEBASE=] [ALT=] [NAME=]
[ALIGN=] [VSPACE=] [HSPACE=] >
<PARAM NAME= VALUE= >
Atributos obligatorios:
CODE: nombre de la clase principal
WIDTH: anchura inicial
HEIGHT: altura inicial
Atributos opcionales:
CODEBASE: URL base del applet (por defecto es el del documento)
ALT: texto alternativo
NAME: nombre de la instancia
ALIGN: justificación del applet
VSPACE: espaciado vertical
HSPACE: espaciado horizontal
En el siguiente ejemplo se hace uso de un applet de Java disponible en Internet, que
sirve para incorporar animaciones a las páginas Web: ImageLoop
<APPLET CODE=ImageLoopItem WIDTH=80 HEIGHT=90>
<PARAM NAME=NIMGS VALUE=10>
<PARAM NAME=IMG VALUE=DUKE>
<PARAM NAME=PAUSE VALUE=1000>
</APPLET>
donde IMG es el parámetro que indica el URL en el que figuran las imágenes que
forman la animación(deben llamarse t1.gif, t2.gif, etc). NIMGS representa el número de
imágenes de las que consta la animación, y PAUSE es la pausa en milisegundos entre
bucles de la animación.
Dpt. Informática Univ. Valencia
48
Entornos de Usuario
Desarrollo de aplicaciones multimedia
En el caso de que el visualizador no sea “Java Compatible”, podemos definir un
contenido alternativo, sin mas que especificarlo entre <APPLET> y </APPLET> sin
utilizar <PARAM>:
<APPLET atributos>
parámetros
contenido alternativo
<APPLET>
Por último, indicar que es posible encontrar en algunas distribuciones (HotJava) otras
etiquetas para la inclusión de applets, como <APP>. Esto se debe a que ésta es la tercera
revisión de la extensión de HTML para incrustación de applets y ha sido adoptada como
definitiva.
7.11 JavaScript
JavaScript es un lenguaje de tipo script compacto y basado en objetos para el desarrollo
de aplicaciones cliente servidor sobre Internet. Las aplicaciones que se pueden realizar
utilizando el JavaScript son similares a las que pueden realizarse con CGI, con la
ventaja adicional de que son gestionadas por el cliente, lo cual añade interactividad y
accesibilidad.
El código JavaScript se introduce en los documentos HTML y puede reconocer y
responder a determinados eventos del usuario como: pulsaciones del ratón, acciones
sobre determinados formularios, etc.
JavaScript y Java aunque compartan su denominación y parte de su sintaxis (aunque
con menos instrucciones en JavaScript) sin embargo existen importantes diferencias
entre ambos. Mientras JAVA es un lenguaje programación en el sentido estricto del
termino, incluyendo una fase de compilado en los programas, JavaScript es lenguaje de
tipo script completamente interpretado. Otra diferencia fundamental estriba en el uso de
las variables: Java utiliza variables con tipos estáticos y que son chequeados en tiempo
de compilación, mientras que JavaScript utiliza variables de tipo dinámico, o sea su tipo
no es fijo y se cambiará dinámicamente según las necesidades. En la siguiente tabla 7.4
se reflejan la comparación entre Java y JavaScript.
JavaScript
Interpretado por el Cliente
Java
Compilado en el servidor antes de ser
ejecutado por el cliente
Basado en objetos. Con objetos Orientado a objetos. Clases y herencia.
predefinido y definición de nuevos objetos,
pero sin clases ni herencia
Código integrado en el documento HTML Apeles distintos de HTML accedidos
‘desde’ pero no integrados ‘en’
Tipo de variables dinámico
Tipos de variable estáticos deben ser
declarados
Enlace dinámico, las referencias a los Enlace estático. Los referencias se
objetos se chequean en tiempo de chequean y deben existir en tiempo de
Dpt. Informática Univ. Valencia
49
Entornos de Usuario
Desarrollo de aplicaciones multimedia
ejecución
compilación
TABLA 7.4 COMPARACIÓN ENTRE JAVASCRIPT Y JAVA
7.11.2 Inclusión de JavaScript en HTML
La introducción de código JavaScript dentro de un documento HTML puede realizarse
de dos formas principalmente: a través de una directiva especial, como parámetro de
ciertas directivas y en respuesta a eventos de usuario predefinido.
El primer método se realiza empleado la directiva SCRIPT. La forma de uso quedaría
como sigue:
<SCRIPT LANGUAGE=”JavaScript”>
Código JavaScript …
</SCRIPT>
Entre estas dos directivas podemos incluir todo el código JavaScript que deseamos. Hay
que puntualizar que el JavaScript tiene una apariencia similar al C y que como este
lenguaje es también sensible al contexto, esto es, distingue entre mayúsculas y
minúsculas.
A la hora de introducir JavaScript embebido en HTML es conveniente ponerlo entre
signos de comentario HTML para evitar que este código aparezca en browser que no
soportan JavaScript. Un ejemplo de la inclusión correcta de JavaScript seria:
<SCRIPT LANGUAGE=”JavaScript” >
<!-Codigo JavaScript
//-->
</SCRIPT>
Algunos consejos utiles que han de tenerse en cuenta es que es conveniente introducir
nuestro código JavaScript dentro de la cabeza del documento HTML ya que esta es la
primera que se carga, de esta forma cuando queramos acceder a una función JavaScript
estaremos seguros que se ya ha sido cargada.
La otra manera de introducir codigo JavaScript dentro de nuestros documentos HTML
es en respuesta a determinados eventos que puede recibir el documento como
consecuencia de las acciones del usuario. Estos eventos estan asociados a determinadas
directivas HTML. La forma general será la siguiente:
<DIRECTIVA manejadorEvento=”Codigo JavaScript”>
Por ejemplo un evento es que el raton se situe sobre una determinada zona del
documento (onMouseOver) y cuando esto ocurre puedo querer sacar un mensaje:
<A HREF=”midocumento.html” onMouseOver=’alert(“Te has puesto sobre el link”)’>
Pasa por aquí si te atreves </A>
Esposible también en este mismo contexto encontrarnos llamadas a JavaScript haciendo
la funcion de enlace. En este caso hemos de añadir la palabra ‘javascript:’, por ejemplo:
Dpt. Informática Univ. Valencia
50
Entornos de Usuario
Desarrollo de aplicaciones multimedia
<A HREF=’javascript:alert(“has activado el link”)’> Link que activa un javascript </A>
Como hemos comentado cada evento puede ser asociado a determinadas directivas, en
la tabla 7.5 se resumen los eventos más comunes con las directivas que pueden tratarlos.
Evento
Causa del Evento
Directivas Asociadas
<BODY>
onLoad
Cuando el documento se carga.
<BODY>
onUnload
Cuando el documento se descarga.
<A HREF>,<AREA>
onMouseOver El ratón se coloca sobre una zona
<A HREF>,<AREA>
onMouseOut
El ratón sale de una zona
<FORM>
onSubmit
Se envia un formulario
<INPUT TYPE=”button,
onClick
Se pulsa el raton sobre una zona o elmento
onBlur
Se pierder el cursor
onChange
Cambia el contenido o se pierde el cursor
onFocus
Se recibe el cursor
onSelect
Se selecciona un texto
checkbox, radio> <AREA>
<A HREF><INPUT TYPE=”TEXT”>
<TEXTAREA>
<INPUT TYPE=”TEXT”>
<TEXTAREA>
<INPUT TYPE=”TEXT”>
<TEXTAREA>
<INPUT TYPE=”TEXT”>
<TEXTAREA>
TABLA 7.5 EVENTOS JAVASCRIPT
Junto a cada directiva podemos poner respuesta a varios eventos siempre y cuando estos
pertenezcan a los que le están asociados (más adelante veremos algunos ejemplos de
esto).
7.11.3 Sintaxis Básica JavaScript
Vamos a realizar un rápido repaso por la sintaxis del JavaScript, aunque como
comentamos anteriormente es bastante similar a la empleada en C o C++, nos
detendremos en los puntos más característicos.
7.11.3.2 Declaración de variables
Las variable en JavaScript como comentamos anteriormente no tienen un tipo
determinado sino que el tipo es determinado dinámicamente en función de los valores
que se le asignan. Sin embargo si que podemos delimitar el entorno de acción de una
variable, pudiendo decir que sean de ámbito local o global. Para declarar una variable
como local a una función o bloque de programa tendremos que hacer:
var Mivariable;
Para declarar una variable de ámbito global simplemente la comenzaremos a utilizar y
le daremos un valor:
Mivariable=7;
con esto definiríamos una variable global de tipo entero, sin embargo como
comentamos anteriormente el tipo de una variable es dinámico con lo cual no se
producirá ningún error si hacemos algo como:
Dpt. Informática Univ. Valencia
51
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Mivariable=”PEPE”;
Si no que simplemente la variable ‘Mivariable’ se cambiara a tipo cadena.
Los tipo simples soportados son los numeros, booleanos y cadenas y objetos.
7.11.3.3 Operadores JavaScript
Los operadores funcionan en JavaScript de una forma muy similar a la que se
empleaban en C:
• Operadores Aritméticos: son los habituales: =, +,-,*,/, %,++,--, etc. Puntualizar si
acaso que podemos utilizar también las abreviaciones usuales en C, estos es x+=5;
(x=x+5) y que el operador suma puede ser también empleado con cadenas:
cadena=”pepe ” + ”perez” introduce en cadena “pepe perez”.
• Operadores Lógicos: && (AND), ||(OR), ! (NOT).
• Operadores de comparación: ==,!=,>=,<=.
• Operadores de Bits: &,|,>>,<<.
En cuanto a la precedencia de los operadores (orden de aplicación) coincide con la vista
en C y como en este lenguaje puede ser alterada con la adecuada colocación de
paréntesis.
7.11.3.3 Sentencias JavaScript.
También en este caso debemos volver a repetir que el JavaScript constituye un
subconjunto de C o C++, las sentencias presentes son:
• Sentencias condicionales: if (expresion condicional) …. else. En este caso también
podemos utilizar la asignación condicional abreviada de C: variable=(expresión
condicional)?(valor en caso cierto):(valor en caso falso).
• Bucles: La posibilidad de bucles en JavaScript viene a traves del uso de las
sentencias for y while, ambas se usan de la misma forma que en C y admite el uso
del break y continue, para alterar la ejecución del bucle. Acabamos de comentar que
ambas instrucciones se utilizan como en C, sin embargo el for además permite un uso
distinto para recorrer los elementos de un array o los componentes de un objeto. Este
uso especial del for seria:
for (i in miArray)
document.write(miArray[i]);
este ejemplo recorre todos los elementos del vector miArray y los imprime en el
documento.
Dpt. Informática Univ. Valencia
52
Entornos de Usuario
Desarrollo de aplicaciones multimedia
7.11.4 Funciones en JavaScript
En este apartado vamos a repasar la sintaxis particular de la funciones en JavaScript.
Las funciones JavaScript se deben acompañar de la palabra clave function para su
definición después vendrá el nombre de la función y luego la lista de parámetros (para
los cuales no se especifica el tipo también es dinámico). El contenido de la función ira
entre llaves.
Un ejemplo de una función JavaScript:
function miFuncion(argumento1, argumento2)
{
if (argumento1)
return 1;
document.write(argumento2);
}
Una propiedad particular de las funciones en JavaScript es que no tienen un numero fijo
de argumentos. Por tanto las funciones podrán ser llamadas con cualquier numero de
argumentos y con cualquier tipo de argumentos. Los argumentos de una función pueden
ser accedidos bien por su nombre o bien por un vector de argumentos que tiene asociada
la función (nombreFuncion.arguments) y el numero de argumentos se puede consultar a
través de: nombreFuncion.arguments.length. Veamos un ejemplo:
function miFuncion(argumentos….)
{
document.write(“Numero de argumentos recibidos=”+miFuncion.arguments.length);
for (i in miFuncion.arguments)
document.write(“Argumento [“+i+”]=”+miFunction.arguments[i]);
}
7.11.5 Modelo de Objetos en JavaScript.
Como ya comentamos anteriormente el JavaScript es un lenguaje de script basado en
objetos por tanto es importante considerar el modelo de objetos que soporta y el uso que
podemos hacer de él. Los objetos en JavaScript, tendrá una forma similar al concepto de
objetos que conocemos, esto es el objeto tendrá una nombre y asociado a este podremos
acceder a sus propiedades (variables de cierto tipo) y a sus métodos (funciones
asociadas al objeto).
Existen tres palabras reservadas en JavaScript que tienen que ver con manejo de
objetos: new (indica la creación de un nuevo objeto). with (objeto) {…..} (todo el
código entre las llaves se supone hace referencia al objeto indicado anteriormente y this
(para hacer referencia al objeto activo en ese momento). Más adelante en los ejemplos
se puede ver el uso de estas palabras clave.
Dentro de JavaScript nos encontraremos con una serie de objetos predefinidos que
podremos utilizar en la forma que tienen, aunque no podremos alterar su forma ni
derivar otros objetos a partir de ellos. Por otro lado tendremos la posibilidad de definir
Dpt. Informática Univ. Valencia
53
Entornos de Usuario
Desarrollo de aplicaciones multimedia
nuevos objetos con las características propias que deseemos (decimos objetos y no
clases en el sentido en que se emplean estas en los lenguajes orientados a objetos).
7.11.5.2 Objetos Predefinidos en JavaScript
Como hemos apuntado anteriormente existen una serie de objetos predefinidos en
JavaScript que podemos utilizar en nuestro código tanto para consulta y/o modificación
de propiedades como para ejecución de sus métodos asociados.
Dentro de los objetos predefinidos en JavaScript haremos una subclasificación. Por un
lado tendremos objetos de propósito general y por otro lado hablaremos de objetos
asociados al navegador y al documento en el que se incluye el código JavaScript.
OBJETOS GENERALES O DEL LENGUAJE
Los objetos generales de uso más común dentro del JavaScript son:
• Objeto String: contiene una cadena de caracteres y tiene algunos métodos
interesantes asociados como el substring(inicio,fin) para obtener una subcadena de la
cadena original o el UpperCase() para convertir una cadena a mayusculas. Por
ejemplo si tenemos: cadena=”pepe perez” y hacemos:
cadena2 = cadena.substring (5,cadena.length-1);
obtendremos dentro de cadena2 la subcadena “perez”.
• Objeto Array: representa un vector de elementos, para declararlo hemos de utilizar el
new. Por ejemplo:
var miArray = new Array();
miArray[0]=”PEPE”;
miArray[1]=”JUAN”;
miArray[2]=”CARLOS”;
como vemos el número de elemento del array no aparece en la declaración, por tanto los
elementos se pueden ir añadiendo dinámicamente.
Para consultar el numero de elementos existentes en una array, podemos consultar una
propiedad asociada a los valores de tipo array que es su longitud, para ello haríamos:
miArray.length. que en esta caso sería 3.
Algunos métodos interesantes asociados al array son: sort() que permite ordenar los
elementos del vector alfabéticamente y reverse() que inverte los elementos del vector.
• Objeto Math: Contiene asociadas todas las funciones matemáticas normales como
seno, coseno, valor absoluto, etc. Por ejemplo para calcular el seno de PI tendríamos
que hacer: Math.sin(Math.PI). En casos en que queremos utilizar varias veces un
Dpt. Informática Univ. Valencia
54
Entornos de Usuario
Desarrollo de aplicaciones multimedia
mismo objeto como en el ejemplo anterior podemos hacer uso del with: with(Math)
{sin(PI)}.
• Objeto Date: se trata de un objeto que contiene información acerca de la hora y la
fecha. La hora esta almacenada en milisegundos desde enero de 1970. Luego los
métodos y propiedades están preparados para trabajar con fechas a partir de la
anteriormente citada. Para crear una variable con la fecha podremos hacer: mifecha =
new Date();. Posteriormente podemos imprimir la fecha actual y hora actual
haciendo: document.write(mifecha);
OBJETOS ASOCIADOS AL NAVEGADOR Y AL DOCUMENTO.
Estos objetos son generados automáticamente cada vez que abrimos una ventana de un
navegador o abrimos un nuevo documento. Estos se organizan en forma de una
jerarquia de objetos de forma que unos objetos estan includos dentro de otros en la
figura, se representa esta organización. Los objetos mas comunes son:
• Objeto window:es el objeto de más alto nivel y contiene las propiedades y métodos
asociados a la ventana del visualizador que estamos utilizando.
• Objeto document:contine las propiedades del contenido del documento actual.
• Objeto location:contiene propiedades del URL que contiene el documento que esta
actualmente cargado.
• Objeto history: contiene las propiedades de los URLs que el usuario visitó
previamente
Window
Frames
location
history
forms
document
links
anchors
images
elements
FIGURA7.18: JERARQUÍA DE OBJETOS JAVASCRIPT ASOCIADOS AL NAVEGADOR
Dpt. Informática Univ. Valencia
55
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Como se puede observar en la figura 7.18 el objeto de más alto nivel es el objeto
window que tiene dentro de el los posibles frames que estén definidos (window.frames),
el objeto location (window.location), el objeto history (window.history) y el objeto
document (window.document).
El objeto document puede tener otros objetos a su vez si estos se encuentran definidos
en su interior estos objetos pueden ser: forms (document.forms), imágenes
(document.images), links (document.links), etc. Esos objetos pueden tener a su vez
objetos en su interior como es el caso de las forms cuyos objetos interiores son los
distintos elementos definidos en la form. Posteriormente veremos algunos ejemplos que
hacen uso de esto.
Los objetos descritos anteriormente poseen métodos asociados para realizar
determinadas acciones.
Propiedades y Métodos de los Objetos del Navegador:
Objeto Window.
Las propiedades más interesantes de este objeto hacen referencia a los elementos que
contiene:
•
frames: objeto de tipo array que contiene la referencia a todos los marcos
definidos dentro de esta ventana.
•
location : objeto location
•
document: objeto documento.
•
•
history: objeto que contiene el historial de la ventana.
parent : referencia al objeto ventana del cual depende (en caso de que sea un
frame).
•
opener: referencia al objeto ventana que abrió esta ventana (en caso de que esta
ventana se haya abierto utilizando el metodo open que luego comentaremos).
•
status : contiene la cadena que se escribe en la barra de estado de la ventana.
Luego veremos un ejemplo de cambio de esta cadena.
En cuanto a los métodos más interesantes del objeto window:
Los métodos de open y close que nos permitirán abrir nuevas ventanas:
miVentana=window.open(“URL con documento a cargar ” , ”Titulo” ,
”configuracion” );
esto abriría una nueva ventana con la configuración especificada donde aparecería el
documento HTML especificado en el URL. Para cerrar esa ventana podríamos hacer la
llamada al método close asociado a la misma:
Dpt. Informática Univ. Valencia
56
Entornos de Usuario
Desarrollo de aplicaciones multimedia
miVentana.close();
En cuanto al objeto documento este como hemos comentado varios métodos asociados,
uno muy común y que hemos visto anteriormente es el write, que nos servia para
escribir cosas en el documento: document.write(“texto a imprimir”).
Otros métodos muy útiles asociados al objeto ventana son el método alert y el confirm
y prompt los cuales nos lanzan una ventana auxiliar para sacar cualquier información
(alert) , para preguntarnos algo (confirm, o para recoger un texto del usuario (prompt):
if (confirm(“quieres que te saque una ventana de información”))
alert(“Esto es una ventana auxiliar de información”);
Luego tenemos algunos métodos que permiten controlar la posición y tamaño de la
ventana como el moveBy(x,y) o el resizeBy(x,y), etc.
Continuaremos haciendo una breve revisión de los métodos y propiedades más
interesantes de algunos de los objetos que hemos visto. Luego en los ejemplos se podrá
ver un uso de los mismos.
Otro de los métodos importantes del objeto ventana es el setTimeout(‘funcion()’,
tiempo_ms). Este método nos permite establecer una especie de temporizador asociado
a la ventana que ejecutara la función que ponemos en el primer parámetro cuando
transcurran los milisegundos especificados en el segundo.
Objeto Location
Propiedades:
• href: contiene el URL completo del documento que contiene en ese momento la
ventana.
• host: contine la información del servidor que envió el documento actual.
Métodos:
• reload() recarga la referencia contenida en href.
• Replace(dir_URL): sustituye el documento actual por el especificado como
parámetro.
Objeto History
Propiedades:
• length: número de documentos en el historial.
• next: cadena que contiene la referencia al documento siguiente.
• previous: cadena que contiene la referencia al documento anterior.
Metodos:
• back(): carga en la ventana el documento anterior.
• forward(): carga el objeto siguiente.
• go(posición) carga el documento indicado por esa posición del array de
documentos visitados.
Objeto Document:
Propiedades:
Dpt. Informática Univ. Valencia
57
Entornos de Usuario
Desarrollo de aplicaciones multimedia
• images : array de objetos imagen contenidos en el documento.
• links: array de objetos enlace contenidos en el documento.
• forms: array de objetos formulario contenidos en el documento.
• referrer: dirección URL desde la que se referenciñó este documento.
• lastModified: fecha de la ultima modificación.
Métodos:
• open(): abre el documento para comenzar una escritura sobre el mismo.
• write(‘cadena’) escribe la cadena dentro del documento si éste está abierto para
escritura.
• writeln(cadena) escribe la cadena y salta una línea.
• close(): cierra el documento para la escritura.
Objeto Image:
Propiedades:
• src : fichero de la imagen. Se pude alterar de forma dinámica.
• width, height: alto y ancho en pixels, no se pueden cambiar dinámicamente,
requieren reescritura.
Objeto Link:
Propiedades:
• target: ventana destino del la salida del enlace.
• href: documento referido por el enlace.
Objeto Form:
Propiedades:
• elements: array con todos los elementos contenidos por el formulario.
• action. Acción de envio del formulario (a cgi o a correo).
• method: método de envio (GET/POST).
• target: ventana que recibirá el resultado de la acción.
Metodos:
• submit() envía el formulario.
• reset(): vacía el contenido de los campos del formulario.
Objetos Text y Textarea:
Propiedades:
• name: nombre del objeto.
• value: datos contenidos en el objeto.
Objetos Checkbox y Radio
Propiedades:
• name: nombre del objeto.
• value: valor asignado al objeto.
• Checked: indica si el objeto esta marcado o no (1 o 0).
• En el caso de los radio la propieda length dice cuántos pertenecen a ese grupo
exclusivo.
Metodos:
• click(): simula la pulsación de los elementos.
Dpt. Informática Univ. Valencia
58
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Objeto Select:
Propiedades:
• name: nombre del objeto.
• options : array de elementos opción, que representan a cada una de las opciones
presentes en el objeto selección. Dentro de cada uno de estos elementos tenemos
otras propiedades, las más usadas son:
o text : texto que definia a la opcion para el usuario
o value: valor que se envia cuando la opcion esta marcada
o selected: vale 1 si la opcion esta marcada y 0 si no lo está.
• selectedIndex: contine el valor del índice seleccionado en el array de opciones.
Solo es válido para selección simple. en selección múltiple será necesario revisar
las opciones una a una.
Funciones JavaScript
Dentro de este repaso a los objetos incluidos en JavaScript vamos a incluir también
algunas funciones predefinidas que pueden ser interesantes:
• Función parseFloat(cadena):Convierte una cadena a un valor real.
• Función parseInt(cadena):Convierte una cadena a un valor entero.
7.11.5.3 Objetos definidos por el usuario en JavaScript
Después de revisar los objetos predefinidos en JavaScript vamos ahora a ver como se
pueden definir objetos a medida de las necesidades del usuario. Los objetos que defina
el usuario podrán contener tanto propiedades (variables) como métodos asociados
(funciones). Para crear un nuevo objeto podemos utilizar una función encargada de
inicializar el objeto:
function miobjeto(arg1,arg2,arg3)
{
this.nombre=arg1; // this es la palabra reservada para referirnos al objeto actualmente
activo.
this.apellido=arg2;
this.edad=arg3;
this.funcionasociada= imprimeobjeto; /* imprimer objeto es una función previamente
declarada que asociamos al objeto como método */
}
La función imprimeobjeto como hemos dicho tiene que estar definida antes de la
función miobjeto. Una vez definida la función miobjeto para crear objetos de ese tipo lo
único que hemos de hacer es:
nuevoobjeto= new miobjeto(“Pepe”, “Perez”,27);
Además podemos emplear el método asociado para imprimir el objeto:
miobjeto.funcionasociada();
Comentar para finalizar que también se pueden definir jerarquías de objetos, o sea un
campo de un objeto puede ser otro objeto.
Dpt. Informática Univ. Valencia
59
Entornos de Usuario
Desarrollo de aplicaciones multimedia
7.11.6 Ejemplos JavaScript.
Después del breve repaso que hemos realizado al lenguaje JavaScrip vamos a
desarrollar unos cuantos ejemplos para ilustrar su uso. Estos ejemplos forman parte de
los trucos comunes que suelen verse en muchas páginas HTML.
7.11.6.1 Ejemplos de trabajo con la barra de estado de la ventana.
La barra de estado es un elemento que pertenece al objeto window, en concreto tenemos
dos propiedades del elemento window que actúan sobre el texto de la barra de esta se
trata de defaultStatus (texto por defecto de la barra de estado)y de status (texto actual de
la barra de estado), vamos a un ejemplo en el que cambiamos en respuesta al evento
onLoad el estado del defaulStatus y otro en el cual ponemos un texto móvil en la barra
de estado.
Ejemplo 1:
<BODY onLoad=”window.defuaultStatus=’acabas de cargar mi pagina’;
return true” onUnload=”window.status=’adios…….ya te vas…’;return
true”>
Ejemplo 2:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-var scrtxt="Est es el texto que se vara moviendose "+
"por el la barra de estado...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scroll()",150); /*función que repite su elecuta su
primer argumento cada vez que transcurre el tiemp indicado en su
segundo argumento (milisegundos) */
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="scroll();return true;">
Prueba de una función JavaScrip que muestra un texto movil en la barra
de estado de la pagina.
</BODY>
</HTML>
Dpt. Informática Univ. Valencia
60
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Ejemplo 3:
Es una variante del anterior y simula una cadena que rebota en sobre la barra de estado:
<HTML>
<HEAD>
<TITLE>kk</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-var posic=60;
var direc=-1;
var rebote="esto rebota";
var ancho=80;
var activo=0;
function f_rebota()
{
var cadena="";
posic+=direc;
for(var i=0;i<posic;i++)
cadena+=" ";
cadena+=rebote;
window.status=cadena;
if(posic<1)
direc=1;
if(posic>ancho-rebote.length)
direc=-1;
if(activo)
setTimeout("f_rebota()",50);
}
function a_rebota()
{
if(activo)
activo=0;
else
{
activo=1;
f_rebota();
}
}
//-->
</SCRIPT>
</HEAD>
<BODY >
<FORM >
<INPUT TYPE=BUTTON NAME=ADF VALUE=REBOTE onClick="a_rebota()">
</FORM>
</BODY>
</HTML>
7.6.11.2 Ejemplos referidos al manejo de frames desde JavaScript
Como comentamos anteriormente el objeto window tiene como objetos hijos los frames
que existen dentro de el en el caso de que estos existan. Vamos a utilizar estos objetos
frame para poder cambiar con un programa JavaScript el contenido de dos frames con
una solo acción del usuario.
Los frames en caso que existan estarán dentro de un array llamado frames:
window.frames[i], si hemos puesto un nombre al frame también podremos acceder a el
a través de window.nombre.
Dpt. Informática Univ. Valencia
61
Entornos de Usuario
Desarrollo de aplicaciones multimedia
En el ejemplo tendremos tres frames uno de los cuales contendrá un botón que al ser
pulsado actualizará los otros dos frames simultáneamente.
Ejemplo 4:
Pagina de creación de los tres Frames
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET COLS="295,*">
<FRAME SRC="cargados.htm” NAME="frame1">
<FRAMESET ROWS="75%,25%">
<FRAME SRC="cell.htm" NAME="frame2">
<FRAME SRC="cell.htm" NAME="frame3">
</FRAMESET>
</FRAMESET>
</HTML>
Código del frame cargados.htm
<HTML>
<HEAD>
<SCRIPT language=”JavaScript">
<!-function carga_dos_frames(page2, page3) {
parent.frame2.location.href=page2;
parent.frame3.location.href=page3; /* parent hace referencia al objeto window padre
del frame1, href es la propiedad del objeto location que contiene el URL con la pagina
cargada*/
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="buttons">
<INPUT TYPE="button" VALUE="Actualizar Frames" onClick="
carga_dos_frames ('nuevo2.htm',’nuevo3.htm')">
</FORM>
</BODY>
</HTML>
Ejemplo 5:
Intercambio del contenido de dos frames con una estructura de navegacion como la del
ejemplo anterior: (el código es el contendio del frame de la izquierda).
<HTML>
<HEAD>
<TITLE>kk</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function probando()
Dpt. Informática Univ. Valencia
62
Entornos de Usuario
Desarrollo de aplicaciones multimedia
{
var documento;
documento=top.frames[0].location.href;
top.frames[0].location.href=top.frames[1].location.href;
top.frames[1].location.href=documento;
}
function abrir_ventana()
{
}
function mover_ventana()
{
}
//-->
</SCRIPT>
</HEAD>
<BODY >
<FORM>
<INPUT TYPE="BUTTON" VALUE="probar" onClick="probando()">
</FORM>
</BODY>
</HTML>
7.11.6.3. Ejemplo de actualización de evaluación de formularios.
Esta es una utilidad interesante ya que podemos evaluar los datos que introduce un
usuario en un formulario y comprobar si son correctos sin necesidad de sobrecargar al
servidor como ocurría en el caso de utilizar un CGI. Para evaluar el formulario nos
basaremos en el objeto form y sus objetos hijo que están dentro del objeto document.
En el ejemplo 6 tenemos un formulario con una entrada de texto donde meteremos una
expresión aritmética, un botón de calculo y un campo de texto donde presentaremos el
resultado.
Ejemplo 6:
<HTML>
<HEAD>
<TITLE>
Prueba de JavaScript.
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function ejemplo1(form) {
form.resultado.value=eval(form.expresion.value);
}
-->
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM align=center>
<p>Introduce una expresion aritmetica:
<input type="text" name="expresion" >
<p>Resultado<input type="text" name="resultado" size=10>
<p><input
type="button"
name="botonal"
onClick="ejemplo1(this.form)">
</FORM>
</BODY>
</HTML>
value="buton"
Ejemplo 7:
Dpt. Informática Univ. Valencia
63
Entornos de Usuario
Desarrollo de aplicaciones multimedia
El siguiente ejemplo compueba si hemos introducido un valor entero entre un mínimo y
un máximo:
<HTML>
<HEAD>
<TITLE>Números</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function ejemplo1(form) {
document.bgColor = 0xff9977
}
function ejj2(str,min,max)
{
var i;
var ch;
if (str == "")
{
Error(min,max)
return false
}
for (i=0; i<str.length; i++)
{
ch = str.substring(i,i+1)
if(ch<"0" || ch>"9")
{
Error(min,max)
return false
}
}
i = parseInt(str)
if ( i<min || i>max)
{
Error(min,max)
return false
}
return true
}
function gracias()
{
alert("Gracias")
}
function Error(min,max)
{
var str;
str = "Introduce un numero entre " + min + " y " + max
alert(str)
}
-->
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM align=center>
<p>Introduce un numero:
<input
type="text"
name="textonal"
onChange="if(!ejj2(this.value,1,100))
{this.select();}
else
{gracias()}">
<p><input
type="button"
name="botonal"
value="buton"
onClick="ejemplo1(this.form)">
</FORM>
</BODY>
</HTML>
7.11.6.4. Ejemplo de utilización de dos imágenes alternativas en un documento.
Finalizaremos con un ejemplo en JavaScript que se puede utilizar para simular que una
imagen se resalta o enfoca cuando el ratón se pone sobre ella, esto se hace teniendo dos
Dpt. Informática Univ. Valencia
64
Entornos de Usuario
Desarrollo de aplicaciones multimedia
imaginas e intercambiándolas cuando el ratón se pone o se va de encima de la zona de
imagen. Esto quedaría como:
Ejemplo 8:
<HTML>
<HEAD>
<TITLE>Prueba cambio de imagenes</TITLE>
</HEAD>
<BODY>
<BR><SCRIPT languaje=javascript>
<!-function switchimages (image,newimage) {
if (document.images) {
eval ("document." + image + ".src=\"" + newimage + "\";");
}
}
// -->
</SCRIPT>
<A HREF="teltran.htm" onMouseOver="switchimages('images[0]',
'IMG1.GIF');
return true" onMouseOut="switchimages('MI_IMAGEN', 'IMG2.gif')">
<IMG SRC="IMG1.GIF" NAME="MI_IMAGEN" >
</A>
<SCRIPT>
</SCRIPT>
</BODY>
</HTML>
En el ejemplo se ha accedido a la misma imagen de dos formas equivalentes por su
nombre: MI_IMAGEN o por su posicion en el array de imagenes asociadas al
documento images[0].
7.11.6.5. Escribiendo en el documento del frame vecino.
El siguiente ejemplo supone que tenemos el navegador dividido en dos frames, desde el
frame de la izquierda se recoge un numero y al pulsar un boton en el de la derecha se
escribe la tabla de multiplicar de ese numero. El codigo siguiente corresponde con el
contenido de la tabla de izquierda.
Ejemplo 9:
<HTML>
<HEAD>
<TITLE>Tabla de multiplicar</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function escribe_tabla()
{
var numero;
numero=parseInt(document.forms[0].tabla.value);
parent.frames[1].document.open();
parent.frames[1].document.write("<TABLE
del"+numero+"</CAPTION>");
BORDER=2><CAPTION>tabla
for(i=1;i<11;i++)
{
parent.frames[1].document.write("<TR><TD>"+numero+"<TD>"+i+"<TD>
"+i*numero);
}
Dpt. Informática Univ. Valencia
65
Entornos de Usuario
Desarrollo de aplicaciones multimedia
parent.frames[1].document.write("</TABLE>");
document.close();
}
//-->
</SCRIPT>
</HEAD>
<BODY >
hajfhakfha
<FORM>
<INPUT TYPE="TEXT" NAME=tabla><BR>
<INPUT TYPE="BUTTON" VALUE="escribir" onClick="escribe_tabla()">
</FORM>
</BODY>
</HTML>
7.11.6.6. Ejemplo, examen junio 99
Enunciado del examen:
Escribir el código correspondiente a los documentos HTML que conforman un sistema
chapucero de proyección de vídeo utilizando páginas HTML. El vídeo es una secuencia
de imágenes independientes que se van mostrando una tras otra. Nuestro sistema de
vídeo podrá reproducir 3 películas distintas que poseen 250 fotogramas cada una. Los
nombres de los fotogramas son peli1img1.jpg, peli1img2.jpg… para la película uno,
peli2img1.jpg, peli2img2.jpg… para la película dos y la misma filosofía para la tres.
Existe una página de configuración de la proyección (figura 2 frame izquierdo) donde
se selecciona la resolución en alto (entre 100 y 500) y ancho (entre 100 y 500) del
vídeo, el número de fotogramas por segundo a proyectar que (debe estar entre 15 y 3).
Los cambios producidos en esta página no tendrán efecto hasta pulsar el botón de
ACTIVAR y cuando esto se produzca se cargara la nueva película por el fotograma
inicial y permanecerá en el fotograma inicial hasta que se pulsen los controles del vídeo.
Estos controles son: STOP que nos lleva al fotograma 1 y detiene la ejecución. PAUSA
que detiene la ejecución en el fotograma actual. PLAY que ejecuta la secuencia en
modo normal. Fotograma adelante y Fotograma Atrás (solo funcionan cuando la
proyección está detenida). El otro botón es el botón de EJECT que no tiene
funcionalidad asignada.
La imagen de los controles se llama controles.gif y sus dimensiones son 400x150.
Dpt. Informática Univ. Valencia
66
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Vamos a resolver utilizando 6 documentos, la division de frames se realizará en dos
fases, por tanto tendremos una jerarquía del tipo:
Exa3.htm
Exa1.htm
Exa5.htm
Exa4.htm
Dpt. Informática Univ. Valencia
Exa6.htm
67
Entornos de Usuario
Desarrollo de aplicaciones multimedia
Codigo de EXA3.htm
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="25%,*">
<FRAME SRC="exa1.htm">
<FRAME SRC="exa5.htm">
</FRAMESET>
</HTML>
Codigo de EXA5.htm
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="75%,*">
<FRAME SRC="exa4.htm">
<FRAME SRC="exa6.htm">
</FRAMESET>
</HTML>
Codigo de EXA1.HTM
<HTML>
<HEAD>
<!-<SCRIPT LANGUAGE="JavaScript">
var peli="peli1";
var res_x=300;
var res_y=300;
var fps=10;
function cambiar_peli()
{
var formu=document.forms[0];
if(parseInt(formu.fotog.value)<3
||parseInt(formu.fotog.value)>15)
{
alert("numero de fotogramas no valido (3-15)");
return;
}
if(parseInt(formu.rx.value)<100 ||parseInt(formu.rx.value)>500)
{
alert("resolucion x no valida (100-500)");
return;
}
if(parseInt(formu.ry.value)<100 ||parseInt(formu.ry.value)>500)
{
alert("resolucion y no valida (100-500)");
return;
}
res_x=parseInt(formu.rx.value);
res_y=parseInt(formu.ry.value);
fps=parseInt(formu.fotog.value);
switch(formu.pelicula.selectedIndex)
{
case 0:peli="peli1";
break;
case 1:peli="peli2";
break;
case 2:peli="peli3";
break;
Dpt. Informática Univ. Valencia
68
Entornos de Usuario
Desarrollo de aplicaciones multimedia
}
//escritura de la nueva imagen base en el documento vecino
top.frames[1].frames[0].document.open();
top.frames[1].frames[0].document.write("<CENTER><IMG
SRC="+peli+"img1.jpg
HEIGHT="+res_y+"WIDTH="+res_x+"
BORDER=1></CENTER>");
top.frames[1].frames[0].document.close();
// Actualizo valores de estado del control del video
top.frames[1].frames[1].estado=0;
top.frames[1].frames[1].imag=1;
top.frames[1].frames[1].peliact=peli;
top.frames[1].frames[1].tinter=1000/fotog;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H2>CONFIGURACION PROYECCION</H2>
<FORM>
Fotogramas<INPUT TYPE="TEXT" NAME=fotog VALUE=10><BR>
ResX<INPUT TYPE="TEXT" NAME=rx VALUE=300><BR>
ResY<INPUT TYPE="TEXT" NAME=ryVALUE=200><P>
<P>
Pelicula<BR>
<SELECT NAME=pelicula>
<OPTION> Pelicula 1
<OPTION> Pelicula 2
<OPTION> Pelicula 3
</SELECT><P>
<INPUT TYPE=BUTTON VALUE="ACTIVAR" onClick="cambiar_peli()">
</CENTER>
</BODY>
</HTML>
Código de EXA6.HTM
<HTML>
<HEAD>
<TITLE> PAGINA IMAGEN 1</TITLE>
<--!
<SCRIPT LANGUAGE="JavaScript">
var
var
var
var
peliact;
imag=1;
estado=0;
tinter=100;
function f_play()
{
var nimag;
if(!estado)
return;
imag++;
nimag=peliact+"img"+imag+".jpg";
parent.frames[0].document.images[0].src=nimag;
setTimeout("f_play()",tinter);
}
function f_stop()
{
var nimag;
Dpt. Informática Univ. Valencia
69
Entornos de Usuario
Desarrollo de aplicaciones multimedia
estado=0;
nimag=peliact+"img1.jpg";
parent.frames[0].document.images[0].src=nimag;
}
function f_ant()
{
var nimag;
imag--;
nimag=peliact+"img"+imag+".jpg";
parent.frames[0].document.images[0].src=nimag;
}
function f_sig()
{
var nimag;
imag++;
nimag=peliact+"img"+imag+".jpg";
parent.frames[0].document.images[0].src=nimag;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<MAP NAME="VIDEO>
<AREA SHAPE="rect" COORDS="0,0,100,50" HREF="javascript:f_stop()">
<AREA
SHAPE="rect"
COORDS="100,0,200,50"
HREF="javascript:estado=1;f_play()">
<AREA SHAPE="rect" COORDS="200,0,300,50" HREF="javascript:estado=0">
<AREA SHAPE="rect" COORDS="0,50,100,100" HREF="javascript:f_ant()">
<AREA SHAPE="rect" COORDS="100,50,200,100" HREF="javascript:f_sig()">
<AREA SHAPE="rect" COORDS="200,50,300,100" HREF="#">
</MAP>
<CENTER><TABLE BORDER=3>
<TD>
<IMG SRC=controle.gif HEIGHT=100 WIDTH=300 USEMAP="VIDEO">
</TABLE>
</CENTER>
</BODY>
</HTML>
Dpt. Informática Univ. Valencia
70