7. Desarrollo de aplicaciones multimedia.

Transcripción

1 7. Desarrollo de aplicaciones multimedia. Dpt. Informática Univ. Valencia

2 Índice 7.1 El sistema WWW y el lenguaje HTML El lenguaje HTML HTML 4.0 y otros estándares HTML Identificación y partes de un documento HTML Formato del Texto...8 FORMATO DE PÁRRAFOS...11 ANIDAMIENTO DE CÓDIGOS Listas URL s y Enlaces URL s Enlaces Incorporación de imágenes Imágenes Enlace Tamaño de Imágenes Imágenes GIF Tablas Tipos MIME e inclusión de otros medios Inclusión de otros medios en un documento HTML Frames (Marcos) Definición de Marcos Especificación del Contenido de los Marcos Fomularios y CGI: Comunicación con el servidor Formularios Reglas de Codificación de los Datos (Codificación URLENCODED) Elementos de los Formularios CGI s Imágenes sensibles (Mapas de imágenes) Imágenes Sensibles Procesadas en el Servidor Web Imágenes Sensibles Procesadas en el Cliente Web Introducción al lenguaje JAVA Características del Lenguaje Java Los applets en JAVA JavaScript Inclusión de JavaScript en HTML Sintaxis Básica JavaScript Funciones en JavaScript Modelo de Objetos en JavaScript Ejemplos JavaScript Dpt. Informática Univ. Valencia 2

3 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

4 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

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

6 Se pueden consultar las diferente versiones en la página oficial del W3C: 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> </BODY> </HTML Cuerpo Texto ASCII FIGURA 7.1 FORMATO BÁSICO DE UN DOCUMENTO HTML Dpt. Informática Univ. Valencia 6

7 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

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

9 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

10 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

11 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 Carácter á á é é í í ó ó ú ú ñ ñ < < > > & & " à á ç ç &nbsp 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

12 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

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

14 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

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

16 Distintos tipos de enlace Enlace Externo Enlace Intern Enlace Externo otro servidor 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 ( 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 / 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

17 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

18 <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= > 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:mio@uv.es > Enviarme correo a mi en mio@uv.es</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 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

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

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

21 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

22 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

23 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

24 FIGURA 7.8:EJEMPLO DE UNA TABA Dpt. Informática Univ. Valencia 24

25 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 Ext. Ext. DOS MIME Estándar Image/Gif.gif.gif Image/Jpeg.jpeg.jpg Image/Tiff.tiff.tif PostScript.eps.ps.eps.ps Text/HTML.html.htm Sound/Au.au.snd.au.snd Sound/Wave.wav.wav Video/Mpeg.mpeg.mpg.mpe Video/AVI.avi.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

26 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= > 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 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

27 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 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> </FRAMESET> </HTML> Aquí se definen los marcos El código <FRAMESET> tiene dos atributos: COLS y ROWS: Dpt. Informática Univ. Valencia 27

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

29 Los visualizadores que no reconocen los marcos ignoran los códigos FRAMESET y FRAME, por lo que interpretarán que el documento carece de contenido. Para que estos visualizadores puedan leer la información, habrá que ponerla entre los códigos <NOFRAME> y </NOFRAME>. En los visualizadores que sí reconocen los marcos, se ignora la información incluida entre los códigos anteriores. Los marcos se pueden anidar, lo que permite elaborar creaciones más complejas, en las que la ventana del cliente Web se divide en marcos tanto a nivel horizontal como vertical. Debemos tener cuidado al anidar marcos, pues la lectura de la página se puede complicar bastante. Veamos algunos ejemplos con marcos: <HTML> <HEAD> <TITLE> Ejemplo de Frames </TITLE> </HEAD> <FRAMESET COLS= 20%, 80% > <FRAME SRC= indice.html > <FRAME SRC= cap1.htm NAME= main > </FRAMESET> <!- En caso de que el visualizador no soporte frames -> <NOFRAMES> <A HREF= cap1.htm >Capítulo 1 </A><BR> <A HREF= cap2.htm >Capítulo 2 </A><BR> <A HREF= cap3.htm >Capítulo 3 </A><BR> </NOFRAMES> </HTML> Este documento genera dos marcos, que ocupan el 20 y el 80 por ciento del ancho de la ventana, respectivamente. El marco de la derecha recibe el nombre de main. Lo siguiente que debemos hacer en crear el contenido del documento indice.html, donde los enlaces apuntan al segundo marco ( main ), mediante el uso del atributo TARGET del código HREF. <HTML> <HEAD> <TITLE> Indice</TITLE> </HEAD> <BODY BGCOLOR= FFFFFF > <H3 ALIGN=CENTER> INDICE </H3> <A HREF= cap1.htm TARGET= main > Capítulo 1 </A><BR> <A HREF= cap2.htm TARGET= main > Capítulo 2 </A><BR> <A HREF= cap3.htm TARGET= main > Capítulo 3 </A><BR> Dpt. Informática Univ. Valencia 29