Página web avanzada

-
HTML AVANZADO

20. Applets de Java

Java™ es un lenguaje de programación orientado a objetos que ha sido desarrollado por la compañía Sun Microsystems, basándose en el lenguaje C++. Aunque es también un lenguaje de carácter general, su principal característica es la de ser independiente de cualquier plataforma, lo que le hace ser muy adecuado para ser utilizado en Internet, ya que puede ejecutarse en cualquier ordenador que tenga un navegador compatible con Java.
Esto quiere decir que el mismo programa se puede utilizar, sin ningún cambio, en un PC, Mac o máquina Unix. Esto es así porque un programa Java no corre directamente en el ordenador, sino que lo hace en una máquina virtual (la Máquina Virtual Java), quedando además confinado dentro de ella, lo que hace que sea un lenguaje seguro, ya que no puede acceder a otros recursos de nuestro ordenador.

Java y Javascript

Existe bastante confusión entre los términos Java y Javascript. Son dos lenguajes distintos.
El Javascript fue creado por Netscape inicialmente con otro nombre, adoptando finalmente (por evidentes razones de oportunismo) el de Javascript. Se trata de un lenguaje interpretado, cuyo código se incluye directamente en el documento HTML (En el Capítulo 16 se utilizaron varios ejemplos).

Nivel de dificultad del lenguaje Java

Aunque el lenguaje Java es más fácil que el C++, en el que está basado, se trata de un lenguaje de programación de alto nivel, y por tanto es muchísimo más difícil (para quien no tiene conocimientos previos) que el HTML, que en realidad no es más que una sencilla manera de formatear el texto de las páginas del Web.
Pero una cosa es programar en Java y otra mucho más sencilla es utilizar programas ya existentes, como veremos. Estos programas se llaman applets, y se pueden incrustar dentro de una página del Web para realizar todo tipo de tareas.
El propósito de este capítulo es mostrar cómo hacer uso de estos programas y dónde encontrarlos, y no el de aprender a programarlos.
Quien esté interesado en iniciarse en el aprendizaje del lenguaje Java puede encontrar un completo tutorial (con la posibilidad de bajar todo el curso por FTP) en:
Tutorial de Java, por Agustín Froufe (España; tiene además un mirror en Chile)
Más información sobre otros manuales de Java en:
La Agenda, de Manuel Barberán, en la sección Java
Lanzador Internet, de Daniel López Avellaneda

¿Qué son los applets?

Los applets son pequeños programas ejecutables escritos en lenguaje Java, que podemos colocar en nuestro servidor, junto con el resto de ficheros que componen un sitio del Web (documentos HTML, ficheros de imagen, sonido, etc.)
Si en una de nuestras páginas hemos incrustado un applet (de la manera que se verá más adelante), cuando un usuario cargue la página, recibirá del servidor dicho applet (al igual que ocurre con una imagen o sonido), y se ejecutará en su navegador.
Pero para que esto ocurra así, es condición indispensable que el usuario esté utilizando un navegador compatible con Java: Netscape 2.x o superior, Explorer 3.0 o superior, o HotJava (navegador desarrollado por Sun, y escrito totalmente en Java). Quien utilice un navegador no compatible, no verá la ejecución del programa (ni siquiera lo cargará), aunque podemos informarle de este hecho con un mensaje.
Como test inmediato para comprobar si tu navegador es compatible con Java, observa lo que ves a continuación:

[Aquí debería haber un applet de Java]



  • Si ves el lema: "WebMaestro ¡Crea tu página del Web!" desplazándose en una línea sinusoidal, es que tu navegador es compatible con Java. (Pulsando con el ratón, se invierte el sentido del desplazamiento)
  • Si, por el contrario, ves el mensaje estático "[Aquí debería haber un applet de Java]", es que tu navegador no es compatible con Java, o que siéndolo, tiene inhabilitada la carga de programas de Java.

¿Para qué sirven los applets?

Con los applets se pueden conseguir efectos visuales y sonoros (incluso ambos a la vez), textos en movimiento, utilidades (por ej., relojes), pequeños programas educativos, juegos interaractivos, presentaciones multimedia, etc. En definitiva, cualquier cosa que se pueda conseguir con un programa pequeño.
No es que haya ninguna limitación teórica en el tamaño de estos programas. La razón de que sean pequeños es la misma por la que no es razonable colocar en una página gigantescos ficheros de imagen o sonido, es decir, no hay que alargar en exceso su tiempo de carga. (El applet visto anteriormente sólo tiene 4,6 kb)

¿Cómo se coloca un applet en una página?

Lo primero de todo, es necesario tener el programa del applet. El ejemplo de applet visto anteriormente, y que vamos a examinar a continuación con detalle, se llama SineText.class
Se trata de un applet que hace que un texto (elegido por el usuario) se desplace formando una onda sinusoidal, en dirección reversible con un click del ratón. Se pueden escoger los colores del fondo y de las letras, elegir entre algunos tipos de fuentes, su tamaño, velocidad de desplazamiento, etc.
Su autor es Mattias Tollet y proviene de The Java(TM) Boutique
Para conseguirlo ahora mismo, pulsa el enlace:
BajarSineText.class (4,6 kb)
Alguna observaciones:
  • Estos programas tienen la extensión .class
  • Hay que respetar escrupulosamente la disposición de las mayúsculas y minúsculas en su nombre (en este caso se debe poner SineText.class y no sinetext.class, por ejemplo).
  • Es un verdadero programa binario, y por tanto no se puede leer en un procesador de textos, como podemos hacer con un documento HTML.
Para colocar el applet en la página, debemos utilizar las siguientes etiquetas (que se colocan donde queramos dentro del cuerpo del documento HTML, es decir entre las etiquetas <BODY> y </BODY>):
<APPLET CODE=SineText.class WIDTH=500 HEIGHT=100>
</APPLET>
Con esto se le indica al navegador que cargue un applet, cuyo código compilado es SineText.class, que se encuentra en el mismo directorio que el propio documento HTML, y que le reserve un área de 500x100 pixels.
Pero en este caso concreto, nos falta añadir los parámetros que personalizan el applet a nuestro gusto (sobre todo el texto que queremos que aparezca). Para ello se añaden etiquetas de este tipo:
<PARAM NAME=nombre_del_parámetro VALUE="contenido_del_parámetro">
Para escoger el texto, será, por ejemplo:
<PARAM NAME=Text VALUE="¡Gracias por tu visita!">
De momento no vamos a definir más parámetros. El resto de ellos serán los que ha escogido su autor por defecto. Las etiquetas del applet quedan de momento así:
<APPLET CODE=SineText.class WIDTH=500 HEIGHT=100>
<PARAM NAME=Text VALUE="¡Gracias por tu visita!">
</APPLET>
Este es el resultado.
(Para no recargar demasiado esta página, se van a ver los ejemplos en páginas separadas)
¿Cómo sabemos qué parámetros hay, cuáles son sus nombres y cuáles son los que hay por defecto? Pues sencillamente, leyendo la documentación del applet, ya que son variables que se le han ocurrido al autor al confeccionar el programa. Esto quiere decir que para otro applet distinto los parámetros serán también distintos.
En este applet, su autor ha definido los siguientes parámetros:
Text - Texto que se va a ver.
Rate - Número de imágenes por segundo.
Font - Fuente: Helvetica (defecto), TimesRoman o Courier.
FontSize - Tamaño de la fuente.
TextStyle - Estilo de la fuente: Plain, Bold (defecto) o Italic.
Speed - Velocidad de desplazamiento 1-10 (5 es por defecto)
Direction - Dirección inicial del desplazamiento. Left (defecto) o Right.
Background - Color del fondo. 000000 (negro) es por defecto.
ForeGround - Color del texto. FF0000 (rojo) es por defecto.
Vamos a añadir algunos parámetros al ejemplo anterior (el orden en el que se colocan es indiferente). Variaremos también el área del applet a 600x75, y el texto del mensaje.
<APPLET CODE=SineText.class WIDTH=600 HEIGHT=75>
<PARAM NAME=Text VALUE="¡Gracias por tu visita! Vuelve pronto">
<PARAM NAME=Rate VALUE="4">
<PARAM NAME=Font VALUE="TimesRoman">
<PARAM NAME=Background VALUE="FFFFFF">
<PARAM NAME=Foreground VALUE="0000FF">
</APPLET>
Este es el resultado.

Mensaje para los navegadores no compatibles con Java

En los dos últimos ejemplos, el usuario con un navegador no compatible no verá absolutamente nada, ya que el applet no se carga ni ejecuta.
Se puede poner un mensaje para que lo lean los que usan un navegador no compatible, y que sin embargo, es invisible para los que sí están viendo ejecutarse el applet. No hay más que añadirlo, sin ningún tipo de etiqueta, a continuación de los parámetros. Por ejemplo:
<APPLET CODE=SineText.class WIDTH=600 HEIGHT=75>
<PARAM NAME=Text VALUE="¡Gracias por tu visita! Vuelve pronto">
<PARAM NAME=Rate VALUE="4">
<PARAM NAME=Font VALUE="TimesRoman">
<PARAM NAME=Background VALUE="FFFFFF">
<PARAM NAME=ForeGround VALUE="0000FF">
Lo siento, pero no puedes ver este applet funcionando.
</APPLET>
Este es el resultado.
Quien use un navegador compatible sólo podrá ver el mensaje si inhabilita la carga de programas de Java.

Otro ejemplo: reloj

Hay veces que el programa del applet necesita unos ficheros adicionales para funcionar (generalmente ficheros de imagen o sonido). Es el caso del ejemplo que vamos a ver, que es un reloj que necesita las imágenes de los dígitos.
Por tanto, aparte de instalar el fichero del applet, que en este caso se llama DigClk.class, hay que instalar los ficheros de imagen de los dígitos en un subdirectorio que se debe llamar necesariamente dcimages (porque así lo ha dispuesto el programador del applet).
Su autor es William G. Ogle Jr. y proviene de The Java(TM) Boutique.
Puedes obtener el applet DigClk.class y los ficheros de imagen agrupados en su subdirectorio dcimages, comprimidos en un fichero .zip:
Bajar dclk100.zip (5 kb)
El código HTML necesario para el applet es:
<APPLET CODE="DigClk.class" WIDTH=122 HEIGHT=29>
Aquí habría un reloj si tu navegador soportase Java
</APPLET>
Y este es el resultado:
Aquí habría un reloj si tu navegador soportase Java
Obsérvese que en este caso no hay etiquetas de parámetos, por no ser necesarias.
(La hora que que visualice el usuario será la de su ordenador)

El atributo CODEBASE

En todos los ejemplos anteriores hemos supuesto que el fichero del applet (el que tiene la extensión .class), está en el mismo directorio que el documento HTML donde queremos incrustarlo. Pero puede ser que lo hayamos colocado en otro directorio distinto.
En estos casos hay que añadir el atributo CODEBASE dentro de la etiqueta <APPLET&GT; indicando el directorio donde se encuentra.
Si en el último ejemplo hubiéramos colocado el fichero DigClk.class en un subdirectorio llamado java (por ejemplo), la etiqueta hubiera quedado así:
<APPLET CODEBASE=java CODE="DigClk.class" WIDTH=122 HEIGHT=29>
[el resto de las etiquetas quedarían igual]

¿Donde se pueden conseguir applets de Java?

En español:
Catálogo de Applets (México)
Applets de Java, de Luis Mariñas
En inglés:
The Java(TM) Boutique en donde se pueden encontrar más de cien applets, distribuidos en categorías, y con con sus correspondientes instrucciones.
The Java Place Similar al anterior, con mas de cien applets. nuev
Otro sitio muy interesante es Gamelan, que es un catálogo de recursos muy extenso.


21. Trucos diversos

Aquí se pueden encontrar varios trucos útiles para las páginas. La mayoría de ellos se basan en el uso de rutinas de Javascript. Son los siguientes:

Distribución de programas desde una página del Web

Si tenemos un fichero ejecutable, es decir un programa, y lo queremos distribuir libremente, se puede conseguir fácilmente poniendo un enlace a dicho fichero. Por supuesto, hay que que colocarlo previamente en el servidor, junto con los demás elementos que forman la página (documentos HTML, ficheros de imagen, de sonido, etc.)
Es muy conveniente que el fichero esté comprimido (por ejemplo, en formato .zip) para reducir su tiempo de carga, y por otra razón que se dirá más adelante.
Supongamos entonces que ya tenemos instalado en el servidor el fichero comprimido programa.zip. Para ponerlo accesible a los demás, simplemente hay que poner un enlace directo a este fichero, como por ejemplo de esta manera:
Para conseguir el programa, pulsa este <A HREF="programa.zip">enlace</A>
Al pulsar el enlace resultante, el navegador da la opción de ejecutarlo o guardarlo. Se podría haber puesto el fichero sin comprimir, p. ej. como programa.exe, pero aparte de que ocupa más espacio, hay el peligro de que en algunos navegadores (como el Explorer) se ejecute inmediatamente, en vez de guardarlo.

Texto fijo de un enlace en la barra de estado

Como se vió en el Capítulo 3, un ejemplo de etiqueta para un enlace es:
<A HREF="http://www.microsft.com">Microsoft</A>
Que da como resultado: Microsoft
Al pasar el cursor del ratón por encima del enlace vemos que aparece en la barra de estado del navegador (en la parte inferior de la pantalla) el URL o dirección del enlace, en este caso http://www.microsft.com
Se puede hacer que aparezca el texto que queramos, y además que permanezca fijo hasta que se pase el cursor por encima de otro enlace. Para ello, basta con introducir lo siguiente, dentro de la etiqueta del enlace:
onMouseOver="window.status='Aquí el texto que se quiera';return true;"
En el ejemplo anterior podemos poner, por ejemplo:
<A HREF="http://www.microsft.com" onMouseOver="window.status='Página principal de Microsoft';return true;">Microsoft</A>
Que da este resultado: Microsoft
Obsérvese como queda permanentemente el texto escogido en la barra de estado, hasta que se pase el cursor por encima de otro enlace que tenga otro texto distinto.
Se puede conseguir (pero sólo con el Netscape, y no con el Explorer) un efecto similar, pero en vez de al llegar al enlace, al abandonar el enlace, si se añade a la etiqueta lo siguiente:
onMouseOut="window.status='Aquí el texto que se quiera';return true;"
Se puede poner sólo o combinado con el anterior, como en el siguiente ejemplo:
<A HREF="http://www.netscape.com" onMouseOver="window.status='Esto se ve al llegar al enlace';return true;" onMouseOut="window.status='Esto otro se ve al abandonar el enlace';return true;">Netscape</A>
Este es el resultado: Netscape
Con el Netscape se ve el texto al llegar al enlace y el otro texto al abandonar el enlace. Con el Explorer sólo se ve el primero (al llegar al enlace), pero no el segundo.

Salto automático de pantalla

Si ponemos en una página la siguiente etiqueta:
<META HTTP-EQUIV="Refresh" CONTENT="x;URL=URL_de_la_siguiente_página">
una vez de que se cargue, permanecerá a la vista durante x segundos, y luego saltará automáticamente a otra página cuyo URL hayamos especificado.
Por ejemplo:
<META HTTP-EQUIV="Refresh" CONTENT="10;URL=http://www.nasa.com">
después de 10 segundos nos transportará automáticamente a la página de la NASA.
Obsérvense el punto y coma después de la cifra de los segundos y la disposición de las comillas.
Esta etiqueta no se puede colocar en cualquier sitio del documento HTML. Debe ir situada en la cabecera (entre las etiquetas </TITLE&GT; y </HEAD&GT;).
Aunque lo implementan las últimas versiones del Netscape y del Explorer, hay algunos navegadores que no lo hacen, por lo que es conveniente suministrar, por si acaso, un enlace al URL deseado para que el propio usuario lo pueda activar.
A continuación, como un ejemplo completo, se va a crear una página que hará que salte automáticamente a la portada de este manual:
<HTML>
<HEAD>
<TITLE>Ejemplo de salto automatico de pantalla</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.wmaestro.com/webmaestro">
</HEAD>
<BODY>
Ejemplo de salto automatico de pantalla. Despues de 5 segundos debe saltar AUTOMATICAMENTE a la portada de WebMaestro.
<P>Si esto no ocurre, pulsa este
<A HREF="http://www.wmaestro.com/webmaestro">enlace</A>.
</BODY>
</HTML>
Véase el resultado.

Botón de envío de un formulario con una imagen

En el Capítulo 11 se vió la etiqueta para conseguir el botón de envío de los datos de un formulario:
<INPUT TYPE="submit" VALUE="zzz">
En donde zzz era el texto que queríamos que apareciera en el botón. Se ilustraba con el siguiente ejemplo:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
<P><INPUT TYPE="submit" VALUE="Enviar datos">
</FORM>
Que resulta:

Escribe tu apellido:
Se puede sustituir este botón de envío estándar por una imagen, como por ejemplo la siguiente imagen (pulsa.gif):
pulsa.gif
Se consigue sustituyendo la etiqueta:
<INPUT TYPE="submit" VALUE="Enviar datos">
por esta otra:
<INPUT TYPE="image" SRC="pulsa.gif" BORDER=0>
con lo que el ejemplo anterior quedaría así:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
<P><INPUT TYPE="image" SRC="pulsa.gif" BORDER=0>
</FORM>
Este es el resultado:
Escribe tu apellido:
Se puede comprobar cómo pulsando la imagen se tiene el mismo efecto que con un botón estándar de un formulario.
Nota: No se puede, sin embargo, sustituir por una imagen el botón de borrado, que se consigue con la etiqueta <INPUT TYPE="reset" VALUE="zzz">

Menú de direcciones

En el Capítulo 11 (Formularios) se vió la manera de elegir entre distintas opciones de texto en un menú desplegable. Ahora vamos a ver un menú similar, pero en el que se puedan elegir entre distintas direcciones del Web, a donde será dirigido el usuario una vez que pulse un botón.
Veámoslo con un ejemplo:

<FORM>
<SELECT NAME="list">
<OPTION VALUE="http://www.microsoft">Microsoft
<OPTION VALUE="http://www.wmaestro.com/webmaestro">WebMaestro
<OPTION VALUE="http://www.netscape.com">Netscape
<OPTION VALUE="http://www.infoseek.com">Infoseek
</SELECT><P>
<INPUT TYPE=button VALUE="Pulsa para ir"
onClick="top.location.href=this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
Este es el resultado:
Se pueden poner tantas opciones como se quiera. También se puede dirigir a páginas propias (como la opción WebMaestro, que dirige a la portada de este manual), pero en este caso se debe poner el URL completo de la página (http://www.wmaestro.com/webmaestro), como si tratara de una página ajena.

Acceso a una página por medio de un password

Puede ocurrir que tengamos una página cuyo contenido no queremos que sea accesible por todo el mundo, sino sólamente por quien nos interese. Para conseguirlo, podemos suministrar un password o clave con el que se pueda acceder a dicha página.
La manera más rigurosa es hacerlo por medio de un CGI, es decir, un programa especial que se coloca en el servidor y que actúa de filtro. Pero, como se ha comentado en varias ocasiones en este manual, el inconveniente de esta solución es que es muy poco frecuente que los administradores de los servidores permitan a sus usuarios la instalación de estos programas, como medida de seguridad.
Una solución alternativa es utilizar el siguiente programa en Javascript (Véase en el Cap. 16 sobre cómo incluir un programa de Javascript en un documento HTML; recuérdese que el script se coloca en la cabecera, entre las etiquetas </TITLE&GT; y </HEAD&GT;).
<HTML>
<HEAD>
<TITLE>Ejemplo de acceso con password</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Saltar(pal) {
window.location=pal+".html"
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Introduce la palabra clave para acceder a la página
<P>
<INPUT TYPE="password" NAME="palclave" SIZE=25 VALUE="">
<INPUT TYPE="button" VALUE="Acceder" onClick="Saltar(this.form.palclave.value)">
</FORM>
</BODY>
</HTML>
Esto funciona de la siguiente manera: una vez escogida la clave (por ejemplo: xyz123), debemos dar a la página de acceso restringido precisamente este nombre: xyz123.html, es decir, se debe dar a la página restringida el nombre compuesto por la clave, más la extensión .html (o .htm)
No hay que cambiar ni añadir nada en el script. Si se utiliza las extensiones .htm en vez de .html la página se llamaría xyz123.htm pero entonces hay que sustituir la línea del script window.location=pal+".html" por window.location=pal+".htm"
Este es el resultado:

Introduce la palabra clave para acceder a la página
Como comprobación, introduce la clave xyz123, y pulsa el botón y verás cómo accedes a la página reservada, y por el contrario, si introduces otra clave, recibirás un mensaje de error.

Apertura de una ventana dimensionable Nuevo

A veces es muy interesante que al cargarse una página aparezca sobre ella una pequeña ventana (de las dimensiones que queramos) en la que se dé algún tipo de información concreta, y que el usuario puede cerrar, o dejar permanentemente abierta mientras navega por otras páginas.
Se ha utilizado el término "ventana", porque es esa la sensación que normalmente se quiere dar, pero en realidad se abre una nueva página del Web, únicamente que suele ser de un tamaño reducido, sin las barras de scroll ni de herramientas (si se desean eliminar, aunque también puede tenerlas si se desea, como veremos).
Debido a que dicha ventana es realmente una página del Web, es evidente que puede contener todo lo que habitualmente contienen (fondo, imágenes, enlaces a otras páginas, incluso frames, etc.). También puede contener un sonido, que sonará mientras permanece abierta, aunque el usuario se dedique a navegar por otras páginas.
La creación de una ventana de este tipo se consigue con la siguiente rutina de Javascript, que como siempre, se deberá colocar en la cabecera del documento HTML , entre las etiquetas </TITLE> y </HEAD>:
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
open('ventana.html', 'Sizewindow', 'width=300,height=350,scrollbars=no,toolbar=no')
</SCRIPT>
</HEAD>
Esto hará que se cargue una ventana, cuyo contenido es un documento HTML que habremos creado, llamado ventana.html, sin barras de scroll ni de herramientas, y de unas dimensiones de 300 de ancho por 350 de alto. Se pueden variar las dimensiones o hacer que tenga barras de scroll (poniendo scrollbars=yes) o barra de herramientas (toolbar=yes).
Pulsando aquí se puede ver una página de prueba, que es la que contiene la rutina en su cabecera, que hará que aparezca una ventana.
Si lo que se desea es que se abra la ventana al pulsar el usuario un botón (y no al cargarse una página nueva, como en el caso anterior), entoces hay que colocar la siguiente rutina (como siempre, entre la etiquetas </TITLE> y </HEAD> de la cabecera, en este caso, de esta misma página):
<SCRIPT LANGUAGE="JavaScript">
function SizeWin() {
open("ventana.html", "Sizewindow", "width=300,height=350,scrollbars=no,toolbar=no");
}
</SCRIPTt>
Y luego, en el sitio de la página que se desee, se crea un botón, con la siguientes etiquetas:
<form>
<input type="button" name="sizewindow" value="Pulsa para abrir una ventana" onclick="SizeWin()">
</form>
Que da el siguiente resultado:

Se puede comprobar que al pulsar este botón, se cargará la ventana. El texto del botón se puede variar, cambiando lo que está entrecomillado en el atributo value.

Carga de varios frames con un único enlace nuevo

Como se vió en el capítulo 14 (Frames), si queremos que al pulsar un enlace se cargue un documento HTML en un frame concreto, hay que incluir en la etiqueta del enlace el atributo TARGET="nombre_dado_al_frame". Este nombre es el atribuído al frame en el documento de definición de frames con al atributo NAME.
O sea, un enlace de este tipo es de esta forma:
<A HREF="documento.html" TARGET="nombre"> Texto del enlace </A>
Pero con esto sólo se carga un único documento en un único frame. Por la razón que sea, nos puede interesar que al pulsar un enlace se carguen varios frames a la vez. Esto se consigue recurriendo a la siguiente rutina de Javascript (colocada, como siempre, entre las etiquetas </TITLE> y </HEAD>:
<SCRIPT LANGUAGE="JavaScript">
<!--
function fnUpdate(){
   top.nombre1.location="documento1.html";
   top.nombre2.location="documento2.html";
   top.nombre3.location="documento3.html";
}
// -->
</SCRIPT>
Aquí se ha supuesto que se desean cargar simultáneamente tres documentos HTML en tres frames distintos (que se llaman nombre1, nombre2 y nombre3). Hay que sustituirlos por los nombres de nuestros frames, así como los de los documentos HTML correspondientes.
El enlace, que provocará la carga de estos tres frames será como sigue:
<A HREF="documento1.html" TARGET="nombre1" onClick="fnUpdate();"> Texto del enlace </A>
Como se puede ver, en el enlace se solicita sólo el primero de ellos, pero al añadir el atributo onClick="fnUpdate();", la rutina de Javascript hace que se carguen también los otros.
Aunque en el caso visto se trata de tres frames, se puede hacer esto mismo con el número de frames que se desee.


22. Canales de chat en páginas Web

En la jerga de las comunicaciones se llama hacer chat (charla, en inglés) al intercambio de texto con otras personas en tiempo real.
Esto es una de las características principales de los servicios on-line (como Compuserve, AOL, MSN, etc.) para sus suscriptores. Internet tiene su propia versión, abierta a todos, llamada IRC (Internet Relay Chat), pero hasta hace poco, sólo se ha podido acceder al él por medio de programas cliente especiales, aparte de ser necesario saber de antemano a qué redes de servidores conectarse y cuáles canales pueden ser interesantes.
Pero todo esto está cambiando con la llegada del chat basado en páginas del Web, que es una variante del IRC que utiliza applets de Java (ver el capítulo 20). Cuando un usuario carga una página Web que contiene uno de estos chats, recibe el applet y su propio navegador lo ejecuta. El applet se encarga de establacer la conexión con el servidor de chat, y con el canal correspondiente, poniéndole en contacto directo con otros usuarios que estén conectados en ese momento con ese mismo canal.

¿Cómo se instala un canal de chat en una página del Web?

Existen unos servidores comerciales que suministran los applets y que se encargan de la gestión del chat, y que además lo hacen de una manera gratuita, pues todo se costea gracias a la publicidad (mientras se utilizan estos canales, los usuarios reciben periódicamente anuncios dentro de la ventana del chat). También suelen exisistir versiones de pago, con un mayor control del canal.
Algunos de estos servidores son:
ParaChat (el utilizado para el chat de WebMaestro)
Chat Planet
WebMasters
El procedimiento suele ser análogo en todos: Hay que rellenar un formulario con nuestros datos. Además hay que escoger un nombre para el canal e indicar el URL de nuestra página en donde se va a instalar el chat.
Después de enviar estos datos, se recibe el código HTML del applet (en realidad unas pocas líneas) por email, o también directamente en la pantalla (como en el caso de ParaChat).
Una vez que tengamos las líneas del código, las podemos incluir en un documento normal de HTML, con sus adornos correspondientes (fondo, texto explicativo, imágenes, etc.). Colocamos este documento HTML en nuestro servidor, y ya está listo para ser utilizado.
Cuando alguien cargue nuestra página, recibirá el applet, y se podrá conectar con nosotros, u otros usuarios que estén conectados en ese momento. Hay que tener en cuenta que el canal estará disponible de manera permanente, por lo que es conveniente indicar las ocasiones en las que estaremos presentes en el canal.


23. Hojas de estilo en cascada.
Introducción

Las hojas de estilo repesentan un gran avance con respecto a cómo los diseñadores de páginas Web pueden aumentar grandemente su capacidad de mejorar la apariencia de sus páginas.
En su origen el Web fue concebido en un entorno científico, como un medio de intercambio de documentación, en el que lo esencial era el contenido, siendo la presentación algo completamente accesorio. Pero a medida que el Web era descubierto por toda clase personas como un fantástico medio de difusión, las limitaciones del HTML con respecto al control sobre la presentación se convirtieron en una fuente continua de frustraciones.
Los nuevos diseñadores de páginas Web estaban acostumbrados a los medios tradicionales sobre papel, en los que tenían un control total sobre la apariencia. Han ido aprendiendo a utilizar diversos trucos para suplir las limitaciones estilísticas del HTML. Pero aunque su intención ha sido buena - mejorar la presentación de las páginas - las técnicas empleadas han tenido unos efectos secundarios a menudo desafortunados. Estas técnicas o trucos suelen funcionar para algunas personas, algunas veces, pero nunca para todas las personas y en todos los casos.
Varios ejemplos de estas técnicas son:
  • Utilización de etiquetas no estándar, inventadas por los creadores de algunos navegadores (como Netscape o Explorer).
  • Convertir el texto en imagen.
  • Usar imágenes transparentes para crear espacios en blanco.
  • Uso de tablas para forzar determinadas presentaciones.
  • Utilizar programas o lenguajes ajenos al HTML para conseguir determinados fines, etc.
Estas técnicas aumentan considerablemente la complejidad de las páginas del Web, tienen una flexibilidad limitada, y sobre todo, provocan problemas al ser utilizados por distintos navegadores o plataformas.
Las hojas de estilo devuelven la facilidad de controlar la presentación y sobrepasan la limitada gama de mecanismos de presentación que se han ido añadiendo al HTML durante estos últimos años. Por ejemplo, con ellas es fácil determinar el espacio entre las líneas de texto, el tipo y tamaño de las fuentes, el grosor de los márgenes, los colores usados para el texto o el fondo, así como el fomateo a voluntad de cualquier etiqueta.
Además hay otro aspecto muy interesante de las hojas de estilo, y es que separan por completo la información para la presentación de una página de su contenido, con lo que se facilita mucho el diseño y revisión de las páginas, pues se puede variar la presentación de una página, o de todo el conjunto de ellas, sin cambiar una sola línea del código del HTML.
Como veremos más adelante, se pueden definir variaciones de diseño por medio de las "clases". Por ejemplo, si se necesitan cinco estilos de párrafos diferentes, se pueden definir cinco clases para la etiqueta <P> : P.normal, P.indentado, P.subrayado, P.rojo y P.dobleespacio.
En este capítulo se hace una introducción a las hojas de estilo, pues se trata de un tema muy extenso. En los siguiente capítulos se verán con detalle los distintos atributos y valores así como distintos consejos para su mejor utilización.

¿Qué navegadores las soportan?

Debido a que se trata de una reciente innovación, hay un soporte todavía limitado para las Hojas de estilo en cascada. Actualmente sólo lo soportan el Explorer 3.0 en adelante, así como el Netscape 4.0 en adelante.
Otros navegadores, o las versiones más antiguas de los anteriormente mencionados, simplemente lo ignorarán.
Las Hojas de estilo todavía no han sido incorporadas al vigente estándar del HTML , el HTML 3.2, pero lo van a ser en el próximo, el HTML 4.0, del cual se ha publicado ya un borrador. En concreto, la documentación referida a las Hojas de estilo se puede encontrar en esta página.

¿Cómo funcionan?

Las hojas de estilo en cascada nos permiten redefinir las reglas que utiliza el navegador para presentar una página del Web.
Todos los navegadores tienen sus reglas. Así, por ejemplo -como vimos en el capítulo 1, el HTML define que las cabeceras del nivel uno (el texto que está entre las etiquetas <H1> y </H1>) se muestre como un texto alineado a la izquierda, un par de puntos mayor que el resto, en negrita y en la fuente Times Roman.
Ejemplo: <H1> Cabecera de nivel 1 </H1> se verá como:

Cabecera de nivel 1

Cada etiqueta define sus propias reglas para mostrar el texto que engloba. Con las hojas de estilo podemos cambiar cada una de estas reglas si lo deseamos. Es decir, podemos modificar a nuestro antojo el comportamiento de cada etiqueta.
Hay tres maneras de añadir estilos a nuestras páginas Web.
  1. Añadiendo instrucciones de estilo sólo a etiquetas concretas, o a un grupo de ellas.
  2. Incluyendo las instrucciones de estilo en el documento HTML de una página concreta - de una manera análoga a cómo se incluye un script de Javascript. Esto permite cambiar la apariencia de una hoja entera, cambiando unas pocas líneas.
  3. Enlazando todos documentos HTML de todas las páginas que componen un sitio del Web con un fichero de definición del estilo. De esta manera, se puede cambiar la apariencia de múltiples páginas retocando un solo fichero.
Podemos utilizar en nuestras páginas uno, dos o los tres métodos descritos, como se verá más adelante.

1. Estilo para etiquetas concretas o grupos de etiquetas

Este método es el apropiado si sólo se desea cambiar el estilo en unas secciones determinadas de una página. Con él podemos manipular las propiedades de alguna etiqueta o de algún grupo de etiquetas.
Se hace añadiendo el atributo STYLE, que contiene una serie de propiedades, dentro de la etiqueta correspondiente. Veamos el siguiente ejemplo:
<P>
"Este es un párrafo normal, sin márgenes a la izquierda ni a la derecha, con el color de su texto en negro".
<P STYLE="margin-left: 0.5in; margin-right: 0.5in; color:green">
"Quiero que este otro párrafo tenga un margen izquierdo de media pulgada, al igual que el margen derecho. Además quiero que su texto sea de color verde".
Que se verá (en los navegadores que soportan hojas de estilo) de esta manera:
"Este es un párrafo normal, sin márgenes a la izquierda ni a la derecha, con el color de su texto en negro".
"Quiero que este otro párrafo tenga un margen izquierdo de media pulgada, al igual que el margen derecho. Además quiero que su texto sea de color verde".
Como se ve en este ejemplo, hemos variado la manera de cómo se comporta habitualmente la etiqueta <P>. Podíamos haber conseguido otras muchas más cosas, como se verá más adelante.
Obsérvese la sintaxis del atributo STYLE. Se ponen entre comillas una serie de propiedades (por ejemplo, margin-left), y después de dos puntos se pone el valor de esa propiedad (en este caso, 0.5in o sea, 0.5 pulgadas). Las distintas propiedades deberán estar separadas por punto y coma.
Si queremos cambiar la apariencia de una sección entera (que agrupe un conjunto de etiquetas), se puede utilizar la etiqueta <DIV>, con la que definimos el estilo globalmente para esa sección.
En el siguiente ejemplo cambiamos el color (a rojo) y el tamaño de la fuente (a 16 puntos de altura) de un bloque de etiquetas por medio de la etiqueta <DIV>, lo que tiene el mismo efecto que si hubiéramos asignado este estilo separadamente a cada una de las etiquetas englobadas (<P>, <UL> y <LI>):

<DIV STYLE="font-size: 16pt; color: red">
<P>La definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas.
<P>Este texto también es rojo y tiene 16 puntos de altura.
<P>Al igual que esta línea.
</DIV>
Que se ve de la siguiente manera:

La definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas.
Este texto también es rojo y tiene 16 puntos de altura.
Al igual que esta línea.
¿Qué ocurre si a una de las etiquetas englobadas por DIV le introducimos un estilo distinto? Comprobémoslo introduciendo un estilo propio a la segunda etiqueta <P>:

<DIV STYLE="font-size: 16pt; color: red">
<P>
Veamos si la definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas, hasta la etiqueta de cierre de DIV.
<P STYLE="color: blue">Esta línea es azul, a pesar de estar englobada dentro de DIV, porque tiene su propio estilo.
<P>Esta otra cumple con el estilo de DIV, porque no tiene estilo propio.
</DIV>
Este es el resultado:

Veamos si la definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas.
Esta línea es azul, a pesar de estar englobada dentro de DIV, porque tiene su propio estilo.
Esta otra cumple con el estilo de DIV, porque no tiene estilo propio.
Como se comprueba en este caso, el estilo dentro de una etiqueta concreta tiene precedencia sobre el estilo del bloque, impuesto por DIV.
Aquí comenzamos a ver la noción de precedencia de unos métodos sobre otros, que como hemos visto antes, son muy variados. Este es el motivo de que se llamen Hojas de Estilo en Cascada (hay una cascada de métodos para aplicar los estilos, teniendo un orden de precedencia riguroso de unos sobre otros). Se verá esto más adelante.
Hay otra etiqueta, <SPAN>, que tiene una misión parecida a <DIV>, pero que se usa para cambiar elementos más pequeños (por ejemplo, palabras o incluso letras), en lugar de bloques enteros. Por ejemplo:
<P>
En este párrafo sólamente queremos atribuir un estilo a
esta <SPAN STYLE="font-family: courier;font-size: 15pt;color: fuchsia">palabra</SPAN>, que queremos que su fuente sea courier, de 15 puntos de altura y de color fucsia.
Resultado:
En este párrafo sólamente queremos atribuir un estilo a esta palabra, que queremos que su fuente sea courier, de 15 puntos de altura y de color fucsia.
Este método de introducir el estilo en etiquetas concretas o en conjuntos de etiquetas es sencillo de aplicar (como hemos visto), y es el adecuado si sólo se desea hacer algún cambio puntual en una página. Sin embargo, no es un adelanto muy grande con respecto al HTML, donde existen etiquetas que hacen funciones similares.
Además, si se desean hacer cambios, hay que examinar todo el documento en busca de etiquetas dispersas. Si se desean hacer cambios globales a una o más páginas son más conveniente los otros dos métodos que veremos a continuación.

2. Inclusión global del estilo en un documento HTML

Se hace poniendo un bloque de instrucciones dentro de las etiquetas <STYLE> </STYLE>, que deberá estar colocado dentro de la cabecera del documento, después del título, entre las etiquetas </TITLE> y </HEAD> (de igual manera que se hace con los scripts de Javascript).
Esta etiqueta <STYLE> tiene un atributo, TYPE, que especifica el tipo de medio en que va a ser publicado en Internet, en nuestro caso será "text/css" (que permitirá a los navegadores que no soporten este tipo el ignorar la hoja de estilo). Es decir, la etiqueta queda de esta manera: <STYLE TYPE="text/css">
Por tanto, la estructura será la siguiente:

<HTML>
<HEAD>
<TITLE> </TITLE>
<STYLE TYPE="text/css">
[bloque de instruciones de estilo]
</STYLE>
</HEAD>
<BODY>
[conjunto de todas las etiquetas que componen la página]
</BODY>
</HTML>
Veamos ahora con un ejemplo, cómo se escribe el bloque de instrucciones del estilo, incluido dentro de la etiqueta <STYLE> (en el capítulo siguiente se ve con detalle cada uno de los atributos):

<STYLE TYPE="text/css">
BODY {background: yellow ;font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
H2 {font-size: 12pt;font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
</STYLE>
Como se ve en este ejemplo, se ponen las distintas etiquetas a las que se quiere atribuir un estilo (en este caso BODY, H1, H2 y DIV, pero podrían haber sido otras cualesquiera); a continuación del nombre de cada etiqueta, y englobadas por los signos "{" y "}" van las distintas propiedades con sus respectivos valores, separadas unas de otras por un punto y coma.
Si se coloca este bloque en la cabecera del documento HTML, donde se ha indicado antes, veremos que cada vez que se usa una de las etiquetas que tienen una definición de estilo, no se comportará de la forma habitual, sino tal como la hemos definido. El resto de las etiquetas, que no están incluidas en el bloque de definición del estilo, se comportarán de la forma habitual. Puede comprobarse lo dicho, viendo una página a la que se le ha aplicado el estilo del ejemplo anterior.

3. Enlazando distintos documentos a una hoja de estilo

Si nuestro sitio del Web está compuesto por muchas páginas, y queremos darles un estilo uniforme a unas cuantas, en vez de incluir un bloque de definición de estilo repetido en cada una de ellas (como se ha visto en la sección anterior), se puede establecer un enlace a un fichero de texto que contiene el bloque de definición del estilo.
Supongamos que queremos aplicar a unas cuantas páginas el estilo visto en el ejemplo anterior. Tendríamos que crear un fichero de texto como este:
BODY {background: yellow ;font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
H2 {font-size: 12pt;font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
Obsérvese que no tiene ninguna etiqueta, pues no es un documento normal HTML, sino que es un fichero de texto que sólo contiene el bloque de definición del estilo.
Se guarda con el nombre que se quiera, pero tiene que tener necesariamente la extensión .css Supongamos que lo guardamos con el nombre de miestilo.css
En todas las páginas que queremos que tengan este estilo concreto, sólamente deberemos de añadir (en el mismo sitio de la cabecera que para el caso anterior, es decir entre </TITLE&GT; y </HEAD&GT;, la siguiente etiqueta:

<LINK REL=stylesheet HREF="miestilo.css" TYPE="text/css">
Aquí se ha supuesto que el fichero miestilo.css se ha dejado en el mismo directorio donde están los documentos HTML. Si no es así, es decir, si está en otro subdirectorio en el servidor, habría que indicar la ruta (por, ejemplo: HREF="subdirectorio/miestilo.css").
Un ejemplo de este método lo constituye este manual, en donde todos los capítulos están enlazados con un fichero que contiene la hoja de estilo para todos ellos, llamado wmstyle.css (se puede ver en esta página su texto).

Mezclando los métodos

Como se ha visto anteriormente, hay tres métodos de aplicar las hojas de estilo en cascada.

¿Se pueden aplicar más de uno a la vez en una misma página?

Sí. Por ejemplo, en la confección de este manual se utilizan simultáneamente algunos de ellos. En las páginas del índice y de la portada se utilizan el segundo método (inclusión de la hoja de estilo en el documento HTML) y también el primero (inclusión del estilo en etiquetas concretas). Y en la totalidad de los capítulos se utilizan el tercero (enlace a la hoja de estilo) y el primero.

¿Qué ocurre si hay información contradictoria entre ellos?

Para evitar conflictos entre los distintos métodos usados simultáneamente, existe un orden de precedencia, es decir, cuál prevalecerá sobre el otro si dan órdenes contradictorias sobre un aspecto concreto.
El orden de precedencia es el siguiente (de mayor a menor):

  1. Estilo dentro de una etiqueta.
  2. Bloque de estilo en la cabecera del documento.
  3. Enlace a un fichero que contiene la hoja de estilo.
Esto quiere decir que una orden de estilo, por ejemplo el color del texto, puesta dentro de una etiqueta, prevalecerá sobre la que esté indicada en los otros dos métodos, si es que se usan en esa página.

Lo más práctico es utilizar el tercer método (enlace a una hoja de estilo), para dar una apariencia consistente a todas las páginas, y si es necesario modificar un aspecto concreto en alguna de ellas, utilizar el primero o el segundo.

24. Hojas de estilo en cascada.
Atributos

A continuación se muestra en una tabla el resumen de los atributos que se pueden incuir en las hojas de estilo. Pulsando el enlace con el nombre del atributo nos lleva a la sección donde se comenta con más detalle.

AtributoDescripciónValoresEjemplo
font-sizeEstablece el tamaño de texto.puntos (pt)
pulgadas (in)
centímetros (cm)
pixels (px)		{font-size: 12pt}
font-familyEstablece la fuente.nombre de la fuente
nombre de la familia de la fuente		{font-family: courier}
font-weightEstablece el espesor de la fuente.extra-light
light
demi-light
medium
demi-bold
bold
extra-bold		{font-weight: bold}
font-styleConvierte el texto a cursiva.normal
italic		{font-style: italic}
line-heightEstablece la distancia entre líneas.puntos (pt)
pulgadas (in)
centímetros (cm)
pixels (px)
porcentaje (%)		{line-height: 24pt}
colorEstablece el color del texto.nombre del color
valores RGB		{color: blue}
text-decorationSubraya o remarca el texto.none
underline
italic
line-through		{text-decoration: underline}
margin-leftEstablece el márgen izquierdo de la página.puntos (pt)
pulgadas (in)
centímetros (cm)
pixels (px)		{margin-left: 1in}
margin-rightEstablece el márgen derecho de la página.puntos (pt)
pulgadas (in)
centímetros (cm)
pixels (px)		{margin-right: 1in}
margin-topEstablece el márgen superior de la página.puntos (pt)
pulgadas (in)
centímetross (cm)
pixels (px)*		{margin-top: -20px}
text-alignEstablece la justificación del texto.left
center
right		{text-align: right}
text-indentEstablece la indentación del texto.puntos (pt)
pulgadas (in)
centímetros (cm)
pixels (px)		{text-indent: 0.5in}
backgroundEstablece la imagen o el color del fondo.URL,
nombre del color
valor RGB		{background: #33CC00}


Explicación de los atributos

font-sizeEl atributo font-size establece el tamaño del texto en puntos (pt), pulgadas (in), centímetros (cm), o pixels (px). Ejemplos:

{font-size: 12pt}
{font-size: 1in}
{font-size: 5cm}
{font-size: 24px}
font-familyel atributo font-family establece la fuente del texto. Se puede especificar una única fuente, como por ejemplo:
{font-family: Arial}
u otras fuentes alternativas, separadas por una coma, como por ejemplo:
{font-family: Arial, Helvetica}
En el ejemplo anterior, nos aseguramos que los sistemas que no soporten la fuente Arial, uticen la fuente Helvetica. Es muy aconsejable especificar, como útimo recurso, un nombre genérico de familia de fuentes. Ejemplo:
{font-family: Arial, Helvetica, sans-serif}
Estos nombres genéricos de familia de fuentes (serif, sans-serif, cursive, fantasy, o monospace) tienen la ventaja de que son representados como las fuentes que tenga instaladas el usuario.
Si se hace referencia a una fuente cuyo nombre consiste en varias palabras (separadas por espacios en blanco), hay que englobarla entre comillas. Ejemplo:
{font-family: "Courier New"}

font-weightEl atributo font-weight establece el espesor de la fuente:
{font-weight: medium}
{font-weight: bold}
Los valores aceptados (extra-light, light, demi-light, medium, demi-bold, bold, y extra-bold) dependen en las fuentes que tenga instaladas el usuario. (Por ejemplo, el sistema del usuario puede que sólo permita medium y bold para una determinada fuente).

font-styleEl atributo font-style establece la fuente como cursiva:
{font-style: italic}
En el borrador de la W3C se contemplan además otros posibles estilos (minúsculas, oblicuas, etc.)

line-heightEste atributo establece la separación entre líneas, que se puede expresar en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%). Ejemplo:
{line-height: 20pt}
También se puede expresar como un porcentaje del valor por defecto:
{line-height: 150%}
En el Explorer 3.0, el espaciado se añade antes de las líneas, no después de ellas. Además este atributo se comporta de forma impredecible con texto que usa diferentes tamaños de texto en la misma línea.
colorEste atributo establece el color del texto de acuerdo con su valor hexadecimal (véase el Cap. 7), o usando los nombres de colores:
{color: #33CC00}
{color: red}
Los nombres de los colores son los siguientes:
blacksilvergraywhite
maroonredpurplefuchsia
greenlimeoliveyellow
navybluetealaqua

text-decoration
Este atributo permite remarcar el texto. Los valores soportados son underline (subrayado), line-through (tachado), none (ninguno) e italic (cursiva). Ejemplos:
{text-decoration: underline}
{text-decoration: line-through}

margin-left, margin-right, y margin-top
Estos atributos establecen los márgenes (izquierdo, derecho y superior respectivamente) en el ámbito de una etiqueta. Se pueden especificar los márgenes en puntos, pulgadas (inches), centímetros o pixels. Por ejemplo:
BODY {margin-left: 0.5in;
           margin-right: 0.5in;
           margin-top: 1in}
Se pueden usar valores negativos. Entonces, en vez de contraerse el magen, se extenderá en la dirección opuesta.

text-align
Este atributo permite justificar los elementos HTML a la izquierda, al centro o a la derecha. Ejemplos:
{text-align: left}
{text-align: center}
{text-align: right}

text-indent
Además de establecer los márgenes, se puede provocar una indentación del texto (es decir, que la primera palabra del párrafo se desplace una cantidad deseada). Se puede expresar en puntos, pulgadas, centímetros o pixels. Por ejemplo:

P {text-indent: 0.5cm}
hace que los párrafos que se crean con la etiqueta <P>, empiecen con su primera línea indentada 0.5 centímetros.
Se pueden usar valores negativos, que sacan el texto hacia los márgenes.

background
Se utiliza este atributo para destacar secciones de una página, estableciendo un color de fondo o una imagen de fondo.
Para establecer un color de fondo, se especifica su valor hexadecimal (véase el Cap. 7), o un nombre de color (ver el atributo color visto anteriormente). Ejemplos:
{background: red}
{background: #6633FF}
También se puede colocar una imagen de fondo en el ámbito de la etiqueta. Es decir, se puede poner, por ejemplo, una imagen de fondo en un párrafo determinado.
Para colocar una imagen, se especifica el URL entre paréntesis (no entre comillas, como es lo habitual). Por ejemplo:
{background: URL(http://www.wmaestro.com/webmaestro/docs/nubes.jpg)}
En este caso se ha puesto el URL absoluto, es decir, la referencia completa en el servidor. Pero es más conveniente hacerlo de forma relativa, es decir con respecto al documento HTML. Si el fichero de imagen y el documento HTML están en el mismo directorio, no hay que poner ningún URL, sino el nombre del fichero de imagen directamente. En el ejemplo anterior sería:
{background: URL(nubes.jpg)}
Vamos a ver una aplicación práctica: poner esta imagen de fondo a un párrafo, utilizando el método de incluir el estilo en la etiqueta <P>:
<P STYLE="background: URL(nubes.jpg)"> Este párrafo tiene un fondo con imágenes, al igual que con el HTML convencional se consigue para toda una página, pero en este caso está limitado al ámbito de esta etiqueta.
<P> En cambio, este otro párrafo no tiene imagen de fondo, porque no se le ha incluido este atributo.
Este es el resultado:

Este párrafo tiene un fondo con imágenes, al igual que con el HTML convencional se consigue para toda una página, pero en este caso está limitado al ámbito de esta etiqueta.
En cambio, este otro párrafo no tiene imagen de fondo, porque no se le ha incluido este atributo.

25. Hojas de estilo en cascada.
Consejos de utilización

En este capítulo se amplían los conceptos vistos en los dos capítulos anteriores, y se introducen algunos nuevos sobre las hojas de estilo en cascada.

Agrupando distintos atributos

Supongamos que se quieren atribuir los mismos atributos a diferentes etiquetas, como por ejemplo:
  H1 {font-size: 15pt;
      font-weight: bold;
      color: maroon}
  H2 {font-size: 15pt;
      font-weight: bold;
      color: maroon}
  H3 {font-size: 15pt;
      font-weight: bold;
      color: maroon}
Se pueden agrupar de esta manera:
  H1, H2, H3 {font-size: 15pt;
            font-weight: bold;
            color: maroon}

Agrupación de los atributos del texto

En el capítulo anterior se han visto una serie de atributos relacionados con la apariencia del texto. Se pueden simplificar agrupándolos de una manera determinada. Así, por ejemplo, en lugar de:
 P {font-weight: bold;
    font-style: italic;
    font-size: 12pt;
    line-height: 20pt;
    font-family: Times, serif; }
Se pueden agrupar en un único atributo llamado font:
 P {font: bold italic 12pt/20pt Times, serif}
Nota: El orden de los atributos es significativo. Los atributos font-weight y font-style se deben especificar antes que los demás.

Agrupación de los atributos de los márgenes

También se pueden agrupar los tres distintos atributos para los márgenes (superior, derecho e izquierdo) en un único atributo llamado margin. Así, por ejemplo, en lugar de:
BODY {margin-top: 20px;
      margin-right: -10px;
      margin-left: -10px}
Se puede poner:
BODY {margin: 20px -10px-10px}
El orden de colocación es significativo. Debe ser: superior (top), derecho (right) e izquierdo (left). Si se pone un único valor, será aplicado a los tres márgenes.

Variaciones por medio de clases

En el capítulo 23 vimos que uno de los métodos era la inclusión global del estilo, en el que se definían los estilos de un bloque de distintas etiquetas. Vimos allí este ejemplo:
<STYLE TYPE="text/css">
BODY {background: yellow ; font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt; font-weight: bold; color: red}
H2 {font-size: 12pt; font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
</STYLE>
Como se puede ver, se define para la etiqueta H2, por ejemplo, que su texto sea de color rojo (red). Pero esto hace que, obligatoriamente, todas las cabeceras de nivel H2 sean de este color en toda la página.
Pero nos podría interesar, por el motivo que sea, que unas veces tenga el color rojo y otras veces sea de otros colores. Para conseguirlo, se pueden emplear unas clases (variantes de esta etiqueta). Para ello, se define separadamente la etiqueta H2, seguida de un punto y un nombre que queramos, como por ejemplo:
H2.rojo {font-size: 12pt; font-weight: bold; color: red}
H2.verde {font-size: 12pt; font-weight: bold; color: green}
H2.azul {font-size: 12pt; font-weight: bold; color: blue}
y en la página, podremos utilizar, según nos convenga, una u otra de estas variantes de la siguiente manera:<H2 CLASS=rojo>Esta cabecera será de color rojo</H2>
<H2 CLASS=verde>Esta cabecera será de color verde</H2>
<H2 CLASS=azul>Esta cabecera será de color azul</H2>
Como se ve, esto nos da una flexiblidad aún mayor para obtener la apariencia que queramos en nuestra páginas.

Aplicación de estilo a los enlaces

Las hojas de estilo también permiten modificar a voluntad la apariencia de los enlaces, asignando cualquiera de los atributos vistos (color del texto, tamaño de la fuente, existencia o no del subrayado, etc.).
Hay dos tipos de enlaces que se pueden modificar:
A:link enlaces que todavía no han sido visitados (pulsados)
A:visited enlaces que ya han sido visitados (pulsados)
Por ejemplo:
A:link {color: red}
A:visited {color: green}
hace que los enlaces sin visitar sean de color rojo, y una vez visitados se pongan de color verde.
Si se les aplica el atributo text-decoration visto en el capítulo anterior, ajustado al parámetro none (ninguno), hace que los enlaces no estén subrayados. Ejemplo:
A:visited {color: fuchsia; text-decoration: none}
hace que los enlaces visitados sean de color fucsia y no estén subrayados.

Comentarios

Se pueden añadir comentarios propios a las hojas de estilo, que pueden servir de recordatorio posterior. Se pueden colocar en cualquier sitio de la especificación, siempre que vayan englobados entre los caracteres /* y */. Ejemplo:
H1 {font: 20pt/22pt bold; color=#00FF00} /*Color verde para las cabeceras de nivel 1 */

Diseñando para todos los navegadores

Si se utiliza el método de incluir un bloque de estilo en la cabecera (ver cap. 23), que consiste en poner las distintas instrucciones de estilo entre las etiquetas <STYLE> y </STYLE>, tal como en el ejemplo que se vió allí:
<STYLE TYPE="text/css">
BODY {background: yellow ; font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt; font-weight: bold; color: red}
H2 {font-size: 12pt; font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
</STYLE>
en los navegadores que no implementen las hojas de estilo se ignorarán las etiquetas <STYLE> y </STYLE>, pero podría ocurrir que aparezca como texto el bloque de definición del estilo.
Para evitar esto, es conveniente englobar dicho bloque de información entre los símbolos <!-- y --> (como se vió en el Cap. 2), que son los que nos permiten hacer comentarios no visibles en la pantalla. Por tanto, es conveniente poner el bloque de definición del estilo de esta manera:
<STYLE TYPE="text/css">
<!--
BODY {background: yellow ; font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt; font-weight: bold; color: red}
H2 {font-size: 12pt; font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
-->
</STYLE>

Aprovechando la herencia entre etiquetas

Como sabemos, las etiquetas de un documento HTML tienen una estructura definida, que de manera muy resumida se puede poner de esta forma:
<HTML>
<BODY>
.... (conjunto de etiquetas que conforman la página)
</BODY>
</HTML>
Como se puede ver, la etiqueta <BODY> engloba a todas las demás. Si se la asigna un estilo determinado a esta etiqueta, todos los elementos que estén dentro de la página (tablas, listas, párrafos, etc.) heredarán este estilo.
Por tanto, para establecer un estilo global a la página entera, lo más apropiado es atribuíserlo a la etiqueta <BODY>. Por ejemplo:
  BODY {font: 10pt/11pt Arial, Helvetica, sans-serif; 
        background: url(nubes.jpg);
        margin-left: 0.5in;
        margin-right: 0.5in}
establece para la página entera la fuente, separación entre líneas, imagen de fondo y espesor de los márgenes. Si se precisa que ciertos elementos concretos dentro de la página tengan otras características distinta a la general, entonces hay que definirlas por separado.



26. HTML dinámico

El HTML dinámico, también conocido por las siglas DHTML (Dynamic HTML) supone una verdadera revolución sobre cómo podemos crear las páginas del Web.
Está basado en una idea de lo más simple: convertir las etiquetas tradicionales del HTML en objetos programables, lo que nos permite poder luego manipularlas a nuestro gusto con JavaScript u otros lenguajes.
Esto supone un gran adelanto. Hasta ahora, el navegador del usuario ejecutaba las etiquetas del HTML una sola vez, en el momento de recibirlas desde el servidor. Su función era única e inmutable: la prevista por las reglas del HTML para esa etiqueta concreta.
Veamos un ejemplo. Si queremos colocar una imagen determinada en una página Web, debemos escribir en el documento HTML la etiqueta <IMG SRC ...&GT; que define cuál es el fichero de imagen, qué atributos va a tener (dimensiones, leyenda, alineamiento, etc.), según se ha visto en los capítulos correspondientes.
El navegador del usuario, al recibir el documento HTML desde el servidor, va interpretando las distintas etiquetas y va formateando la página de acuerdo a ellas. Al llegar a la etiqueta de imagen, la colocará en la página Web en una posición determinada y con los atributos indicados por la propia etiqueta.
Una vez que la imagen esté visible en la pantalla, ya no habrá nada que la haga cambiar... excepto el HTML dinámico. De la manera que se verá más adelante, se pueden conseguir muchas cosas hasta ahora impensables: que al pasar el cursor del ratón por encima de la imagen, o al pulsarla, cambien los atributos de la imagen por otros distintos, o incluso por otra imagen diferente, etc.
Con el DHTML se pueden conseguir otras muchas cosas: texto que cambia de posición, de color o de fuente. Enlaces que cambian de destino, etc.
Pero lo mejor de todo es que estos cambios se producen sin que se tenga que volver a cargar la página desde el servidor, ni tampoco que el servidor deba estar configurado de ninguna manera especial para permitir esto.

Navegadores que utilizan el DHTML

Por desgracia, hay un inconveniente: la implementación de esta técnica por parte de los dos navegadores más importantes, (Netscape, desde su versión 4.0 y Explorer, también desde su versión 4.0), no es la misma.
Se va a ver en este capítulo exclusivamente la técnica que utiliza el Explorer, debido a que Netscape no ha adoptado, al contrario que Microsoft, la norma llamada DOM (Document Object Model) propuesta por el W3C (el comité oficial que regula las normas del HTML)
Esto tiene como consecuencia que con la técnica del Netscape 4.0 sólo se pueden cambiar las propiedades del objeto mientras se está cargando la página, y no después, lo que arruina casi todo el potencial y las ventajas del DHTML.
Por otra parte, la ventaja del método del Explorer no es sólo la indicada, sino que además es más sencilla de utilizar. Por estos dos motivos, se va ver la técnica utilizada por el Explorer, y no la del Netscape.
Es posible que Netscape adopte la norma DOM en versiones posteriores, pero de momento, todo lo que se va a ver a continuación sólo podrá ser apreciado con el Explorer 4.0

Aplicación del DHTML a las imágenes

Una de las cosas más llamativas que se pueden hacer con el DHTML es cambiar el fichero de imagen asociado a una etiqueta de imagen.
Como se vió en el capítulo 4, la etiqueta convencional del HTML para colocar una imagen en una página es de este tipo:
<IMG SRC="imagen1.gif">
imagen1.jpg El atributo SRC hace referencia al fichero que contiene la imagen que se quiere mostrar en la pantalla (en este caso imagen1.gif). El resultado es la imagen que se ve a la derecha.
Para convertir esta etiqueta en un objeto al que se pueda hace referencia desde un lenguaje de programación, basta con añadirle el atributo ID, de la siguiente manera:
<IMG ID="MiPerro" SRC="imagen1.jpg">
Ahora la etiqueta ya es un objeto programable, cuyo nombre es MiPerro (o el nombre que se le haya querido dar; no hay ninguna regla para ello, puede ser cualquier palabra, como MiPerro, o miperro, o perro, etc.)
Cuando se carga la página, la imagen que se ve en primer lugar es la señalada en la etiqueta (en este caso imagen1.jpg), al igual que en la etiqueta convencional.
Pero si en alguna parte del documento HTML hemos incluido una rutina en JavaScript (o en VBScript) que haga uso del siguiente comando:
MiPerro.src="imagen2.jpg"
provocará que, al ejecutarse dicha rutina, la imagen que aparezca ya no será imagen1.jpg, sino imagen2.jpg.
Para comprenderlo mejor, veamos algunos ejemplos:

Cambio de imágenes por medio del cursor del ratón

En el capítulo 21 (Trucos diversos), en la sección Texto fijo de un enlace en la barra de estado, se vió cómo conseguir que al pasar el cursor por encima de un enlace (o al abandonarlo) apareciera un texto fijo en la barra de estado. Esto se conseguía introduciendo dentro de la etiqueta del enlace los comandos de JavaScript onMouseOver y onMouseOut.
Nos vamos a valer de estos mismos comandos, y de otro más: onMouseClick, para cambiar dinámicamente la imagen por la acción del cursor del ratón.
Cambio al pasar por encima el cursor del ratón
Hay que introducir en la etiqueta de la imagen el siguiente comando:
onMouseOver="MiPerro.src='imagen2.jpg';"
con lo que la etiqueta completa quedaría así:
<IMG ID="MiPerro" SRC="imagen1.jpg" onMouseOver="MiPerro.src='imagen2.jpg';">
Inicialmente imagen1.jpg, luego imagen2.jpgComo se puede apreciar en la imagen de la derecha, inicialmente es la misma imagen (imagen1.jpg) que en la etiqueta convencional, pero al pasar el cursor del ratón por encima de ella, cambia por otra imagen distinta (imagen2.jpg)
Se ha hecho que ambas imágenes tengan las mismas dimensiones por motivos estéticos, pero pueden ser de tamaños completamente distintos.


Comentarios

Publicar un comentario

Entradas populares

Cómo subir la web a internet

-
Para subir cualquier web a internet se pueden usar páginas como  https://es.000webhost.com/ . Lo único que hay que hacer es lo siguiente: 1. Registrarte (no es necesario pagar, de forma gratuita también se puede) 2. Crear un sitio web 3. en el sitio web pulsar en administrador de archivos (Subir) 4. Subir todos los archivo en ".html" pulsando en la nube 5. Entrar en el archivo subido y copiar el enlace para enviarlo o subirlo a tus redes.  Esta es mi página, espero que te guste:   https://eloso.000webhostapp.com/mipag4%20(4).html
Leer más

Pasos para editar una foto en photoshop

-
Para editar cualquier foto sencilla y añadirle elementos, en mi revista por ejemplo, una cara, al igual que en montaje del paisaje solo hay que seguir los siguientes pasos: 1. Abrir archivo nuevo 2. Abrir el fondo que queramos copiar (en mi caso una revista de vogue) 3. Abrir la foto de la persona que queramos colocar encima (yo la he elegido una con una postura y colores que más o menos encaja en la revista) 4. Cortar la cara o el cuerpo que queramos colocar encima (para mí la herramienta más fácil para cortar algo es el lazo magnético), una vez seleccionado con el lazo magnético crear capa vía cortar. 5. Seleccionar esta capa y arrastrarla hasta nuestro fondo. 6. Darle los últimos retoques a la foto con la goma y colocarla en el tamaño adecuado de manera que encaje en el fondo perfectamente. 7. Guardar la foto en el formato que deseemos.
Leer más