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 &aacute; &eacute; &iacute; &oacute; &uacute; &ntilde; &lt; &gt; &amp; &quot; &agrave; &ccedil; &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&iacute;tulo 1 </A><BR> <A HREF=”cap2.htm”>Cap&iacute;tulo 2 </A><BR> <A HREF=”cap3.htm”>Cap&iacute;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&iacute;tulo 1 </A><BR> <A HREF=”cap2.htm” TARGET=”main”> Cap&iacute;tulo 2 </A><BR> <A HREF=”cap3.htm” TARGET=”main”> Cap&iacute;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&eacute;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