ENSAYO: "CAMINO AL FUTURO"
View more documents from candreslozano
sábado, 9 de julio de 2011
jueves, 20 de mayo de 2010
Semana Nº 10
Efectos Multimedia
El término multimedia se utiliza para referirse a cualquier objeto o sistema que utiliza múltiples medios de expresión (físicos o digitales) para presentar o comunicar información. De allí la expresión "multi-medios". Los medios pueden ser variados, desde texto e imagenes, hasta animación, sonido, video, etc. También se puede calificar como multimedia a los medios electrónicos (u otros medios) que permiten almacenar y presentar contenido multimedia . Multimedia similar al empleo tradicional de medios mixtos en las artes plásticas, pero con un alcance más amplio.
Se habla de multimedia interactiva cuando el usuario tiene libre control sobre la presentación de los contenidos, acerca de qué es lo que desea ver y cuando; a diferencia de una presentación lineal, en la que es forzado a visualizar contenido en un orden predeterminado.
Hipermedia podría considerarse como una forma especial de multimedia nteractiva que emplea estructuras de navegación más complejas que aumentan el control del usuario sobre el flujo de la información. El término "hiper" se refiere a "navegación", de allí los conceptos de "hipertexto" (navegación entre textos) e "hipermedia" (navegación entre medios).
El concepto de multimedia es tan antiguo como la comunicación humana ya que al expresarnos en una charla normal hablamos (sonido), escribimos (texto), observamos a nuestro interlocutor (video) y accionamos con gestos y movimientos de las manos (animación). Con el auge de las aplicaciones multimedia para computador este vocablo entró a formar parte del lenguaje habitual.
Cuando un programa de computador, un documento o una presentación combina adecuadamente los medios, se mejora notablemente la atención, la comprensión y el aprendizaje, ya que se acercará algo más a la manera habitual en que los seres humanos nos comunicamos, cuando empleamos varios sentidos para comprender un mismo objeto.
Movimiento diagonal
Hagamos ahora una variante de tal forma que la imagen, en vez de desplazarse únicamente en horizontal, vea también modificada su coordenada vertical, de tal forma que el desplazamiento final sea a lo largo de la diagonal. El código sería:
function MueveCapa(){ var antx, anty, limite=400; antx= parseInt(capa1.style.left); anty= parseInt(capa1.style.top); if (antx limite){ return true; } else{ capa1.style.left= antx + 2; capa1.style.top= anty - 1; setTimeout("MueveCapa()",5); } return true; } function DevuelveCapa(){ capa1.style.left=20; capa1.style.top=200; return true; }
Movimiento libre
Basándonos en que disponemos del evento "onmousemove", que se dispara cada vez que se mueve el ratón a lo largo de la pantalla, y que cualquier evento hace que se actualicen las propiedades x e y (coordenadas) del objeto "event" a los valores de las coordenadas del cursor en el momento de dispararse el evento en cuestión, podemos desarrollar una función que hace que la imagen "persiga" al cursor a lo largo de la pantalla. Lo único que hay que hacer es actualizar los valores de las coordenadas de la capa de la imagen en cada momento a los mismos valores que tenga el cursor en el momento en que se mueve. Dado que el evento se dispara cada vez que se mueve el cursor, si lo hacemos de forma continuada conseguiremos una actualización constante, lo que provoca la "persecución" de la capa al cursor. La función es muy sencilla y sería:
HTML HEAd TITLE Página con movimientos /TITLE /HEAD BODY onmousemove="MueveCapa();"Script language="JavaScript" !-- function MueveCapa(){ capa1.style.left= window.event.x -75; capa1.style.top= window.event.y; return true; } //-- /Script CENTER H3 Pantalla de Movimiento /H3 /CENTER div id="capa1" Style="position:absolute; left:20px; top:200px; visibility:visible;z-index:1;" IMG src="corre.gif" width=75 height=110 /div /BODY /HTML
Es importante que una vez que se carga el documento, con el evento “onload”, se lanza la ejecución de la función “MueveBomba” y ya no para. Se puede observar que dicha función se limita a ir modificando las distancias (coordenadas) left y top de la capa en la que se encuentra la imagen de la bomba de dos en dos píxeles. Lo único que hay que tener en cuenta es que en la función que mueve la capa se debe comprobar si se ha llegado a alguno de los límites de la ventana en la que se mueve (los valores de estos límites pueden variar según el tamaño de la ventana en la que se lance la ejecución y pueden ser comprobados en vez de asignados). En caso de que se llegue a alguno de los límites se debe modificar el signo del número de píxeles que se le suman, con lo que si ha sido el límite derecho o el inferior, se le suma una cantidad negativa, con lo que la capa deshace el camino andado, dando la sensación de rebote. La pantalla queda:
TRANSICIONES
Fundidos
MOVIMIENTO
Veamos un ejemplo con movimiento horizontal en el que la situación inicial de la capa de la imagen es la izquierda de la pantalla, y cuando el usuario pulse el botón de mover la capa, se desplazará hacia la derecha hasta que su posición se corresponda con un límite predefinido:
El código que genera la pantalla anterior y que permite el movimiento de la capa es:
HTML HEAD TITLEPágina con Fomulario /TITLE /HEAD BODY Script language="JavaScript" EFECTOS MULTIMEDIA
/div div id="capa2" Style="position:absolute; left:20px; top:325px; visibility:visible;z-index:2;" Form name="miform" Input Type="button" Value="Mover Imagen" onClick="MueveCapa();"> Input Type="button" Value="Situar Imagen" onClick="DevuelveCapa();" /Form /div /BODY /HTML
La
Combinación con movimientos
Una variante de este tipo de efectos se puede aplicar al pequeño programa de la bomba que rebotaba en los bordes de la pantalla, de tal manera que ahora se tenga que pulsar sobre ella y cuando se consigan dos aciertos, se nos ponga más difícil el juego: la imagen debe disminuir y debe moverse más deprisa por la pantalla. El código sería:
172 HTML DINÁMICO, ASP Y JAVASCRIPT
HTML HEAd TITLEPágina con movimientos /TITLE /HEAD Body onload="MueveBomba();" Script language="JavaScript" !-- var limiteSup=0,limiteInf=350,limiteIz=0,limiteDer=525; var espera=10; var avanceh=5, avancev=5; aciertos=0; function MueveBomba(){ if (parseInt(bomba.style.left)limiteDer){ avanceh=-5;} if (parseInt(bomba.style.top)limiteInf){ avancev=-5;} bomba.style.left= parseInt(bomba.style.left)+avanceh; bomba.style.top= parseInt(bomba.style.top)+avancev; setTimeout("MueveBomba()",espera); } function Explota(){ aciertos ++; alert('Exploté'); if ((aciertos % 2)==0){ imagen.style.pixelWidth -= 5; imagen.style.pixelHeight -=5; espera--; } return true; } // --> /Script div id="bomba" Style="position:absolute; left:20; top:200; visibility:visible;z-index:2;overflow:clip;clip:auto" onclick="Explota();" IMG id="imagen" src="image2.gif" width=25 height=35 /div /BODY /HTML
DHTML Y ACTIVEX
function MueveCapa(){ var antx, anty, limite=400; antx= parseInt(capa1.style.left); anty= parseInt(capa1.style.top); if (antx limite){ return true; } else{ capa1.style.left= antx + 2; capa1.style.top= anty - 1; setTimeout("MueveCapa()",5); } return true; } function DevuelveCapa(){ capa1.style.left=20; capa1.style.top=200; return true; }
Movimiento libre
Basándonos en que disponemos del evento "onmousemove", que se dispara cada vez que se mueve el ratón a lo largo de la pantalla, y que cualquier evento hace que se actualicen las propiedades x e y (coordenadas) del objeto "event" a los valores de las coordenadas del cursor en el momento de dispararse el evento en cuestión, podemos desarrollar una función que hace que la imagen "persiga" al cursor a lo largo de la pantalla. Lo único que hay que hacer es actualizar los valores de las coordenadas de la capa de la imagen en cada momento a los mismos valores que tenga el cursor en el momento en que se mueve. Dado que el evento se dispara cada vez que se mueve el cursor, si lo hacemos de forma continuada conseguiremos una actualización constante, lo que provoca la "persecución" de la capa al cursor. La función es muy sencilla y sería:
HTML HEAd TITLE Página con movimientos /TITLE /HEAD BODY onmousemove="MueveCapa();"Script language="JavaScript" !-- function MueveCapa(){ capa1.style.left= window.event.x -75; capa1.style.top= window.event.y; return true; } //-- /Script CENTER H3 Pantalla de Movimiento /H3 /CENTER div id="capa1" Style="position:absolute; left:20px; top:200px; visibility:visible;z-index:1;" IMG src="corre.gif" width=75 height=110 /div /BODY /HTML
Es importante que una vez que se carga el documento, con el evento “onload”, se lanza la ejecución de la función “MueveBomba” y ya no para. Se puede observar que dicha función se limita a ir modificando las distancias (coordenadas) left y top de la capa en la que se encuentra la imagen de la bomba de dos en dos píxeles. Lo único que hay que tener en cuenta es que en la función que mueve la capa se debe comprobar si se ha llegado a alguno de los límites de la ventana en la que se mueve (los valores de estos límites pueden variar según el tamaño de la ventana en la que se lance la ejecución y pueden ser comprobados en vez de asignados). En caso de que se llegue a alguno de los límites se debe modificar el signo del número de píxeles que se le suman, con lo que si ha sido el límite derecho o el inferior, se le suma una cantidad negativa, con lo que la capa deshace el camino andado, dando la sensación de rebote. La pantalla queda:
TRANSICIONES
Fundidos
MOVIMIENTO
Veamos un ejemplo con movimiento horizontal en el que la situación inicial de la capa de la imagen es la izquierda de la pantalla, y cuando el usuario pulse el botón de mover la capa, se desplazará hacia la derecha hasta que su posición se corresponda con un límite predefinido:
El código que genera la pantalla anterior y que permite el movimiento de la capa es:
HTML HEAD TITLEPágina con Fomulario /TITLE /HEAD BODY Script language="JavaScript" EFECTOS MULTIMEDIA
/div div id="capa2" Style="position:absolute; left:20px; top:325px; visibility:visible;z-index:2;" Form name="miform" Input Type="button" Value="Mover Imagen" onClick="MueveCapa();"> Input Type="button" Value="Situar Imagen" onClick="DevuelveCapa();" /Form /div /BODY /HTML
La
Combinación con movimientos
Una variante de este tipo de efectos se puede aplicar al pequeño programa de la bomba que rebotaba en los bordes de la pantalla, de tal manera que ahora se tenga que pulsar sobre ella y cuando se consigan dos aciertos, se nos ponga más difícil el juego: la imagen debe disminuir y debe moverse más deprisa por la pantalla. El código sería:
172 HTML DINÁMICO, ASP Y JAVASCRIPT
HTML HEAd TITLEPágina con movimientos /TITLE /HEAD Body onload="MueveBomba();" Script language="JavaScript" !-- var limiteSup=0,limiteInf=350,limiteIz=0,limiteDer=525; var espera=10; var avanceh=5, avancev=5; aciertos=0; function MueveBomba(){ if (parseInt(bomba.style.left)limiteDer){ avanceh=-5;} if (parseInt(bomba.style.top)limiteInf){ avancev=-5;} bomba.style.left= parseInt(bomba.style.left)+avanceh; bomba.style.top= parseInt(bomba.style.top)+avancev; setTimeout("MueveBomba()",espera); } function Explota(){ aciertos ++; alert('Exploté'); if ((aciertos % 2)==0){ imagen.style.pixelWidth -= 5; imagen.style.pixelHeight -=5; espera--; } return true; } // --> /Script div id="bomba" Style="position:absolute; left:20; top:200; visibility:visible;z-index:2;overflow:clip;clip:auto" onclick="Explota();" IMG id="imagen" src="image2.gif" width=25 height=35 /div /BODY /HTML
DHTML Y ACTIVEX
Como se puede observar, cada vez que se dispara el evento “onclick”, que al fin y al cabo detecta que ha sido pulsado el contenedor de la imagen (se podía haber situado directamente sobre la etiqueta IMG en vez de en la etiqueta DIV), se ejecuta la función “Explota”, que comprueba si se lleva un número par de aciertos (aciertos % 2), y si es así se decrementa la anchura y altura de la imagen y se decrementa el tiempo de espera, que está almacenado en la variable “espera”. De esta forma se vuelve más difícil conseguir otros dos aciertos. Es evidente que, ante un número determinado de aciertos, la capa terminará por desaparecer, al igual que la foto del ejemplo de las transiciones anteriores, y por tanto no se podrán conseguir más aciertos. Es un buen ejercicio intentar evitar esa situación tomando alguna decisión al respecto (que se mantenga un determinado tamaño pero que se incremente la velocidad, que vuelva a crecer, etc.).
DHTML Y ACTIVEX
En cuanto a los efectos multimedia que se pueden conseguir con HTML dinámico, una vez vistas las herramientas de las que se dispone, ya sólo es cuestión de imaginación y creatividad. La combinación de los movimientos de las capas, los efectos de visibilidad y la posibilidad de hacerlos desaparecer hacen que se puedan conseguir efectos visuales muy llamativos. Sin embargo, Html dinámico incorpora la posibilidad de usar en las páginas una serie de controles de ActiveX muy fácilmente. Se pueden incorporar a los documentos que se están diseñando sin necesidad de introducir identificadores de objetos ni nada similar, ya que han sido incorporados al navegador como un componente más. Simplemente se declaran y se hace uso de ellos: son los filtros y las transiciones. Veamos los primeros:
Filtros
En Html dinámico existen una serie de filtros que se pueden aplicar directamente sobre un objeto para producir un determinado efecto sobre él. Esto, lógicamente, reduce la necesidad de almacenamiento de variantes del objeto con todos los efectos deseados en el servidor, claro está, siempre y cuando el efecto deseado sea alguno de los disponibles.
Para utilizar un determinado efecto existen dos posibilidades: la primera es declararlo directamente sobre el estilo del objeto, de tal forma que se aplica directamente. Así, podemos hacer que un determinado texto aparezca reflejado verticalmente (girado sobre un eje horizontal, de tal forma que el resultado es el reflejo sobre el plano que separa dicho eje). Como ejemplo, al aplicarlo sobre el texto de la capa declarada como “texto” en el código:
HTML HEAD TITLEPágina con Filtros/TITLE
Cookies
DHTML Y ACTIVEX
En cuanto a los efectos multimedia que se pueden conseguir con HTML dinámico, una vez vistas las herramientas de las que se dispone, ya sólo es cuestión de imaginación y creatividad. La combinación de los movimientos de las capas, los efectos de visibilidad y la posibilidad de hacerlos desaparecer hacen que se puedan conseguir efectos visuales muy llamativos. Sin embargo, Html dinámico incorpora la posibilidad de usar en las páginas una serie de controles de ActiveX muy fácilmente. Se pueden incorporar a los documentos que se están diseñando sin necesidad de introducir identificadores de objetos ni nada similar, ya que han sido incorporados al navegador como un componente más. Simplemente se declaran y se hace uso de ellos: son los filtros y las transiciones. Veamos los primeros:
Filtros
En Html dinámico existen una serie de filtros que se pueden aplicar directamente sobre un objeto para producir un determinado efecto sobre él. Esto, lógicamente, reduce la necesidad de almacenamiento de variantes del objeto con todos los efectos deseados en el servidor, claro está, siempre y cuando el efecto deseado sea alguno de los disponibles.
Para utilizar un determinado efecto existen dos posibilidades: la primera es declararlo directamente sobre el estilo del objeto, de tal forma que se aplica directamente. Así, podemos hacer que un determinado texto aparezca reflejado verticalmente (girado sobre un eje horizontal, de tal forma que el resultado es el reflejo sobre el plano que separa dicho eje). Como ejemplo, al aplicarlo sobre el texto de la capa declarada como “texto” en el código:
HTML HEAD TITLEPágina con Filtros/TITLE
Cookies
Descripción
Las cookies constituyen una potente herramienta empleada por los servidores Web para almacenar y recuperar información acerca de sus visitantes. Dado que el Protocolo de Transferencia de HiperTexto (HTTP) es un protocolo sin estados (no almacena el estado de la sesión entre peticiones sucesivas), las cookies proporcionan una manera de conservar información entre peticiones del cliente, extendiendo significativamente las capacidades de las aplicaciones cliente/servidor basadas en la Web. Mediante el uso de cookies se permite al servidor Web recordar algunos datos concernientes al usuario, como sus preferencias para la visualización de las páginas de ese servidor, nombre y contraseña, productos que más le interesan, etc.
Una cookie no es más que un fichero de texto que algunos servidores piden a nuestro navegador que escriba en nuestro disco duro, con información acerca de lo que hemos estado haciendo por sus páginas.
Entre las mayores ventajas de las cookies se cuenta el hecho de ser almacenadas en el disco duro del usuario, liberando así al servidor de una importante sobrecarga. Es el propio cliente el que almacena la información y quien se la devolverá posteriormente al servidor cuando éste la solicite. Además, las cookies poseen una fecha de caducidad, que puede oscilar desde el tiempo que dure la sesión hasta una fecha futura especificada, a partir de la cual dejan de ser operativas.
Google, Yahoo, MySpace, Facebook, YouTube ... lo que sea web que visitan, mantener un registro detallado de quién, cuándo, qué, cuánto y con qué frecuencia navegar por Internet.Monitores de cada página web que se tiene acceso en el equipo y guarda un registro cronológico para su revisión.Y es mucho más que una historia sencilla página web. El informe de estadísticas web a resumir un carácter del top10 sitios web visitados y otros informes, de modo que usted puede tener una idea clara de lo que están haciendo en Internet.
Con las instantáneas de pantalla característica, incluso se puede ver exactamente lo que escriba en el cuadro de búsqueda y otra caja web de entrada.
El Reverso Tenebroso de las cookies
Desde los comienzos de esta nueva tecnología, la expansión del uso de las cookies se ha visto seriamente retraída como consecuencia de una oleada de falsos rumores, verdades a medias y ríos de tinta de mala prensa.
Aunque las cookies no son más que un simple fichero de texto almacenado por el navegador del usuario en su disco duro, inexplicablemente han suscitado un clamor general en Internet, convirtiéndose tristemente en el centro de cruzadas alarmistas anti-cookie que abogan por la intimidad y el anonimato. Proclaman una serie de doctrinas, que gracias a la esencia abierta y tolerante de Internet se propagan en cuestión de días a cientos de miles de usuarios, más o menos ingenuos.
Usos de las cookies
¿Quién no ha pensado alguna vez en acceder a un sitio y encontrarlo personalizado a nuestro gusto? ¿A quién no le gustaría cuando se conecta a su librería virtual que le avisen de las novedades sobre aquellas materias que más le interesan? ¿A cuánta gente le parece un engorro tener que teclear su nombre y contraseña cada vez que se conecta a un sitio de pago? ¿Nunca has visitado una página con montones de información por los que tienes que bucear para encontrar lo que te interesa? ¿No estaría bien que cuando quieres bajarte programas de la red, no tengas que especificar siempre que lo quieres para Windows95 o para Mac?
Personalización, ésa es la palabra clave. La Tela de Araña Mundial (WorldWideWeb) constituye una fantástica herramienta para crear presentaciones con el potencial de llegar a cualquier persona en cualquier lugar del mundo (con conexión a Internet, claro). Aunque la idea es muy atractiva, en la práctica ocurre que la información presentada en las páginas se torna impersonal. Es algo así como comprar un CD-ROM por el cual puedes navegar, incluso admirar animaciones y escuchar sonidos y música, pero que es igual para todo el mundo, y como todos sabemos, las mismas cosas no nos interesan a todos por igual. Lo que realmente nos gusta son los productos a nuestra medida, confeccionados especialmente para nosotros.
Cómo configurar los navegadores
Está bien, ¿que no quieres saber nada de las cookies? Si estás convencido de que las cookies amenazan tu intimidad y estás dispuesto a vivir sin la comodidad que proporcionan, es tan fácil como desactivarlas, de forma que tu navegador te avise cada vez que le quieren colar una cookie.
Desgraciadamente, la opción por defecto tanto de Netscape como de Explorer es que las cookies sean aceptadas silenciosamente. En consecuencia, muchos usuarios pueden navegar durante años por Internet, albergar 300 cookies en su disco duro y ni siquiera saber que existen o qué son.
Netscape
En el menú "Edición", en “Preferencias...”, en la entrada “Avanzadas”, marca la casilla “Advertir antes de aceptar una cookie”. Esto en realidad no desactiva la cookie, sino que obliga al navegador a mandarte un aviso cada vez que le envían una cookie. Con decir que no la quieres se acabó el problema. Sin embargo, más que una solución, esta componenda puede llegar a ser una tortura si nos conectamos a un sitio que nos mande una cookie con cada imagen, inundándonos con ellas. Dispones también de una serie de opciones alternativas sobre las cookies. Si de verdad estás lleno y no quieres tragar ni una más, selecciona la opción de "Desactivar cookies" siempre y a correr.
Microsoft Internet Explorer
Si usas Microsoft Internet Explorer, en el menú “Herramientas”, en “Opciones de Internet...”, en la pestaña “Seguridad”, pulsa el botón "Personalizar nivel...”. Busca la sección sobre cookies y configúrala como te haga sentir más a gusto. Verás que también se ha incluido la opción de no recibir ninguna cookie. Selecciónala si no quieres saber nada de ellas.
Navegación anónima
Otra forma de evitar las cookies es navegar a través de un anonimizador.
Cómo puede controlar el Internet o en sitios web
Si consideramos algunos sitios web no son adecuadas para sus empleados, puede bloquearlas el acceso a estos sitios web.
Controla efectivamente el acceso a la web de la red corporativa. El administrador puede otorgar a los usuarios con privilegios de visita diferentes sitios web. Cada visite el sitio web se realizará un seguimiento y grabado en los detalles, y puede cualquier sitio web puede ser bloqueado.
Por ejemplo, si usted no tiene gusto a sus empleados ver vídeos on-line en el lugar de trabajo, puede bloquear www.YouTube.com, www.MetaCafe.com y otros sitios de video por Internet.
Formas dinámicas de control de acceso a la web:
1. Bloquear un sitio web con URL completa, por ejemplo, www.porn-videos.com
2. Bloque de direcciones de sitios web que contienen ciertas palabras clave, por ejemplo, * Juego *, * * porno, etc
3. Defina una clase web, y luego bloquear toda una clase
Pantalla de instantáneas 
Chat / IM 
Mensajes de correo electrónico 
Páginas web 
Red 
Programas 
Dispositivos 
Bienes 
Impresión 
Documentos
Semana Nº 9
BURBUJEO DE SUCESOS
Hasta el momento, toda la gestión de sucesos que se ha tratado estaba centrada en recepción de sucesos para elementos individuales. En la mayoría de las ocasiones, la gestión de sucesos para elementos individuales es más que suficiente.
Para aquellas ocasiones en que la gestión de sucesos para elementos individuales no baste, HTML Dinámico posee la capacidad de hacer subir los sucesos por la jerarquía de contención de HTML. En primer lugar, definamos lo que quiere decir la jerarquía de contención. El siguiente código de HTML es un ejemplo:
HTMl
BODY
DIV id=miGrupo
H1 La Imagen/H1
IMG SRC="imagen.gif"
/DIV
/BODY
/HTML
La jerarquía de contención se define simplemente por lo que está contenido dentro de otras cosas. Si se examina el código HTML anterior, y se presta atención a los lugares donde comienzan y finalizan los marcadores, se apreciará que el marcador HTML rodea a todos los demás marcadores.
El siguiente marcador en profundidad, el marcador BODY, rodea al marcador DIV. Finalmente, el marcador DIV rodea a los elementos IMG y a los elementos H1 .
El burbujeo de sucesos es el proceso de recorrido ascendente de esta jerarquía de contención, comenzando por el elemento que reciba el suceso. Supongamos que se pulsa en el marcador H1 del ejemplo. Entonces el navegador lleva a cabo las siguientes acciones:
• Comprueba si el elemento
H1 posee un gestor de sucesos correspondiente al tipo de suceso onclick. De ser así, lo ejecuta.
• Comprueba si el predecesor del elemento
H1, el elemento DIv, tiene un gestor de sucesos para este tipo de sucesos. De ser así, lo ejecuta.
• Comprueba si el predecesor del elemento
DIV, el elemento BODY, tiene un gestor de sucesos para este tipo de sucesos. De ser así, lo ejecuta.
• Comprueba si el predecesor del elemento
BODY, el objeto documento, tiene un gestor de sucesos para este tipo de sucesos. De ser así, lo ejecuta.
Un uso juicioso del burbujeo de sucesos puede hacer que nuestra vida como programadores sea mucho más sencilla, porque nos libera de tener que asociar gestores de sucesos a todos y cada uno de los elementos individuales.
Suponga par ejemplo que desea hacer que se invoque la función hacer Actualizacion( ) de JavaScript cada vez que se pulse en los elementos IMG o H1 del ejemplo anterior. Para hacer esto sin burbujeo de sucesos es preciso enlazarlos todos ellos en la forma siguiente:
h1 onclick="hacerActualizacion()"La Imagen/h1
img SRC="imagen.gif" onclick="hacerActualización()"
Dado que estos dos elementos se encuentran situados jerárquicamente dentro de una pareja de marcadores DIV, sin embargo, y dado que uno sabe que los sucesos burbujean ascendiendo por la jerarquice contención, basta en lugar de hacer esto con situar el enlace de sucesos en el marcador DIV, en la forma siguiente:
div id=miGrupo onclick="hacerActualización()"
h1La Imagen /h1
img SRC="imagen.gif"
/div
A continuación, cuando el usuario pulse en el elemento H1 o en el elemento IMG, el navegador comprobará si poseen gestores de sucesos para onclick. No es así.
Sin embargo, a continuación el navegador comprueba si el predecesor de los elementos H1 y IMG posee ese gestor de sucesos. Así es, así que entonces el navegador ejecuta el gestor onclick del elemento DIV para gestionar los sucesos de los elementos H1 y IMG. Esto proporciona el mismo comportamiento que efectuar un enlazado con cada elemento individual, pero sin utilizar tanto código.
El ahorro de código y de complejidad de este ejemplo es relativamente mínimo. Sin embargo, el burbujeo de sucesos puede significar un enorme ahorro de tiempo con documentos ricos en sucesos. Imagine que tuviera varios centenares de elementos y que desease utilizar gestores de sucesos similares para ellos, y que tuviera que asignar individualmente los gestores de sucesos a todos y cada uno de esos elementos.
Descubriendo dónde ha comenzado el burbujeo de sucesos
Dado que el burbujeo de sucesos recorre todo el camino ascendiendo por la jerarquía, es posible que acaben por ser invocados unos cuantos gestores de sucesos. Si está uno escribiendo un gestor de sucesos correspondiente a la parte superior de la jerarquía, quizá resulte ventajoso conocer dónde ha comenzado a burbujear un suceso.
La propiedad window.event.srcElement permite obtener esta información. Cuando se recibe un suceso que ha burbujeado, la propiedad srcElement contiene el elemento de HTML que recibiera por primera vez el suceso antes de que empezara a ascender.
Cancelación del burbujeo de sucesos
HTML Dinámico hace burbujear los sucesos hasta la parte superior de la jerarquía de contención, salvo indicación expresa en contra, así que aun cuando el suceso se gestione en el nivel del elemento, seguirá llegando hasta la cima del objeto documento.
Esto puede resultar sorprendente, así que considere cómo funciona el burbujeo de sucesos en el ejemplo inicial de burbujeo de sucesos. La gestión de sucesos siempre comienza en el elemento en el cual se produce el suceso, así que si se ha pulsado en el elemento H1, entonces se desencadenará un suceso onclick para el elemento H1. Entonces se desencadenará el suceso onclick para el elemento DIV que rodea al elemento H1. ¿Qué sucede si sólo se desea que se proporcione el suceso al elemento H1 y no al elemento DIV? La cancelación del burbujeo de sucesos permite hacer esto.
Normalmente, tiene sentido permitir que HTML Dinámico haga uso de su comportamiento por omisión. Se pueden encontrar casos, sin embargo, en los que se desee detener el burbujeo de sucesos en un punto concreto de la jerarquía. HTML Dinámico permite hacer esto mediante la propiedad window.event.cancelBubble.
La forma correcta de utilizar la propiedad cancelBubble consiste en enlazar un gestor de sucesos en aquel punto de la jerarquía en el que se desea que se detenga el burbujeo de sucesos. Entonces, en el gestor de sucesos, se da a la propiedad window.event.cancelBubble el valor verdadero.
Descripcion de los eventos mas comunes.
El concepto más fundamental de la gestión de sucesos es precisamente el concepto de suceso. Un suceso es una notificación del navegador referente a que el estado de las cosas ha cambiado de algún modo, y normalmente como consecuencia de que el usuario haya llevado a cabo una cierta acción.
Todos los tipos de sucesos se pueden generar y también se pueden gestionar mediante guiones. Muchos de los sucesos más comunes y gran parte de la forma en la que se gestionan con lenguajes de guiones se describirá posteriormente en este capitulo. Aunque existen muchos tipos de sucesos, los sucesos básicos se pueden descomponer en cuatro tipos distintos.
Sucesos de teclado
El suceso de teclado más básico es el que genera el usuario al pulsar una tecla. Sin embargo, existen sucesos distintos para la pulsación de una tecla y para el momento en que se suelta la tecla, y también sucesos para el caso en que se pulsen combinaciones de teclas, tales como A y la tecla de Mayúsculas, por ejemplo. También existe un suceso correspondiente a la situación en la que se pulse la tecla de ayuda.
Sucesos de ratón
Los sucesos de ratón son los tipos de sucesos más comunes en HTML Dinámico, porque la forma principal de interaccionar del usuario con las páginas de la red es a través del uso de un ratón. De forma muy similar a los sucesos del teclado, los sucesos para pulsar con el botón del ratón, para mantenerlo pulsado, y para soltarlo son todos ellos distintos, además, existe un suceso para el caso en que el usuario pulse dos veces con el botón del ratón. Por último, se pueden generar sucesos mediante el movimiento del ratón, independientemente de sí se pulsa o no el botón del ratón.
Sucesos de foco
Se pueden generar sucesos cuando un elemento adquiere nuestra atención, y también cuando la pierde. Si no está familiarizado con el concepto de foco, se describirá más adelante en la sección «Sucesos de foco y selección», pero por el momento basta saber que el foco es un concepto que se utiliza para describir con cuál de los elementos de la página está interaccionando en este momento el usuario.
Sucesos de cambio de estado
Estos sucesos no son generados necesariamente por interacción con el usuario. Más bien, se pueden generar sucesos de cambio de estado cuando el estado del documento cambia de manera importante. Por ejemplo, se puede generar un suceso cuando el documento ya se ha cargado en proporción suficiente para que el usuario pueda interactuar con él, o también se puede generar otro suceso cuando ya se haya cargado por completo el documento.
Ya se han discutido algunos de los sucesos más comunes de entre los que se emplean en HTML Dinámico, tales como puedan ser onclick, onmouseup y onmousedown. Se trata de un subconjunto de una clase de sucesos generales de HTML Dinámico que serán posiblemente los sucesos que más se utilicen.
Estos sucesos generales están disponibles para todos los elementos del documento. Quizá existan elementos individuales que puedan poseer sucesos adicionales especificas para ellos, pero se garantiza que todos los tipos de elemento tendrán accesos a estos sucesos generales.
Los sucesos generales de los cuales se garantiza que están disponibles para todos los elementos son los sucesos de ratón y de teclado. Además de estos tipos de sucesos, los sucesos de foco y de cambio de estado se tratan también y los tipos de elementos con los cuales se pueden utilizar se discutirán a continuación.
Sucesos de ratón
Los sucesos de ratón están relacionados todos ellos con que el usuario lleve a cabo algún tipo de acción con el ratón. El usuario puede efectuar dos tipos generales de acciones con el usuario: pulsar con uno de los botones del ratón o desplazar el puntero del ratón dentro de la ventana del navegador.
Los primeros sucesos que se tratan en esta sección son los sucesos generados cuando el usuario pulsa con el botón del ratón. Estos sucesos relacionados con el botón del ratón se proporcionan según un orden preestablecido de la siguiente manera:
onmousedown
onmouseup
onclick
ondblclick
A continuación, se estudiarán los sucesos que se generan cuando el usuario mueve el ratón. De forma muy similar con los sucesos relacionados con el botón del ratón, los sucesos relacionados con el movimiento del ratón se producen por un orden especifico:
onmouseover
onmousemove
onmouseenter
onmousedown
El suceso onmousedown se desencadena cuando el usuario pulsa un botón del ratón mientras éste se encuentra por encima del objeto. Una sutileza importante del suceso onmousedown es que se invoca antes del suceso onclick.
onmouseup
El suceso onmouseup se desencadena cuando el usuario suelta el botón del ratón cuando éste se encuentra por encima de un objeto. A diferencia del suceso onmousedown, el suceso onmouseup se invoca después del suceso onclick.
onclick
El suceso onclick se desencadena cuando el botón del ratón se pulsa y se suelta mientras éste se encuentra por encima de un objeto. La información acerca del botón del ratón que se haya pulsado estará disponible en la propiedad window.event.button (véase la sección posterior titulada «Objeto window.event»).
ondblclick
El suceso ondblclick se desencadena cuando se pulsa dos veces con el botón del ratón mientras éste se encuentra por encima de un objeto. El botón del ratón tiene que pulsarse dentro del intervalo de tiempo que el sistema admita como propio de pulsar dos veces.
onmouseover
El suceso onmouseover se desencadena cuando el usuario mueve el puntero del ratón de tal modo que éste entre dentro del alcance de un objeto. Entonces no volverá a desencadenarse de nuevo hasta después de que el usuario saque el puntero del objeto y vuelva a introducirlo en él.
Introducción a las hojas de estilo
Las hojas de estilo representan un avance importante para los diseñadores de páginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus páginas. En los entornos científicos en que la Web fue concebida, la gente estaba más preocupada por el contenido de sus páginas que por su presentación. A medida que la Web era descubierta por un espectro mayor de personas de distintas procedencias, las limitaciones del HTML se convirtieron en fuente de continua frustración, y los autores se vieron forzados a superar las limitaciones estilísticas del HTML. Aunque las intenciones han sido buenas -- mejorar la presentación de las páginas web --, las técnicas para conseguirlo han tenido efectos secundarios negativos. Entre estas técnicas, que dan buenos resultados para algunas personas, algunas veces, pero no siempre ni para todas las personas, se incluyen:
* La utilización de extensiones propietarias del HTML
* Conversión del texto en imágenes
* Utilización de imágenes para controlar el espacio en blanco
* La utilización de tablas para la organización de las páginas
* Escribir programas en lugar de usar HTML
Estas técnicas incrementan considerablemente la complejidad de las páginas web, ofrecen una flexibilidad limitada, sufren de problemas de interoperabilidad, y crean dificultades para las personas con discapacidades.
Las hojas de estilo resuelven estos problemas al mismo tiempo que reemplazan al limitado rango de mecanismos de presentación del HTML. Con las hojas de estilo es más fácil especificar la cantidad de espacio entre líneas, el sangrado de las líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo de las fuentes, y otros muchos detalles.
Por ejemplo, la siguiente hoja de estilo CSS (almacenada en el fichero "especial.css") hace que el color del texto de un párrafo sea verde ("green") y lo rodea de un borde rojo ("red") continuo ("solid"):
P.especial {
color : green;
border: solid red;
}
Los autores pueden vincular esta hoja de estilo a su documento fuente HTML con el elemento LINK:
Un documento con una hoja de estil Este párrafo debería tener texto especial 'verde'.
Para aquellas ocasiones en que la gestión de sucesos para elementos individuales no baste, HTML Dinámico posee la capacidad de hacer subir los sucesos por la jerarquía de contención de HTML. En primer lugar, definamos lo que quiere decir la jerarquía de contención. El siguiente código de HTML es un ejemplo:
HTMl
BODY
DIV id=miGrupo
H1 La Imagen/H1
IMG SRC="imagen.gif"
/DIV
/BODY
/HTML
La jerarquía de contención se define simplemente por lo que está contenido dentro de otras cosas. Si se examina el código HTML anterior, y se presta atención a los lugares donde comienzan y finalizan los marcadores, se apreciará que el marcador HTML rodea a todos los demás marcadores.
El siguiente marcador en profundidad, el marcador BODY, rodea al marcador DIV. Finalmente, el marcador DIV rodea a los elementos IMG y a los elementos H1 .
El burbujeo de sucesos es el proceso de recorrido ascendente de esta jerarquía de contención, comenzando por el elemento que reciba el suceso. Supongamos que se pulsa en el marcador H1 del ejemplo. Entonces el navegador lleva a cabo las siguientes acciones:
• Comprueba si el elemento
H1 posee un gestor de sucesos correspondiente al tipo de suceso onclick. De ser así, lo ejecuta.
• Comprueba si el predecesor del elemento
H1, el elemento DIv, tiene un gestor de sucesos para este tipo de sucesos. De ser así, lo ejecuta.
• Comprueba si el predecesor del elemento
DIV, el elemento BODY, tiene un gestor de sucesos para este tipo de sucesos. De ser así, lo ejecuta.
• Comprueba si el predecesor del elemento
BODY, el objeto documento, tiene un gestor de sucesos para este tipo de sucesos. De ser así, lo ejecuta.
Un uso juicioso del burbujeo de sucesos puede hacer que nuestra vida como programadores sea mucho más sencilla, porque nos libera de tener que asociar gestores de sucesos a todos y cada uno de los elementos individuales.
Suponga par ejemplo que desea hacer que se invoque la función hacer Actualizacion( ) de JavaScript cada vez que se pulse en los elementos IMG o H1 del ejemplo anterior. Para hacer esto sin burbujeo de sucesos es preciso enlazarlos todos ellos en la forma siguiente:
h1 onclick="hacerActualizacion()"La Imagen/h1
img SRC="imagen.gif" onclick="hacerActualización()"
Dado que estos dos elementos se encuentran situados jerárquicamente dentro de una pareja de marcadores DIV, sin embargo, y dado que uno sabe que los sucesos burbujean ascendiendo por la jerarquice contención, basta en lugar de hacer esto con situar el enlace de sucesos en el marcador DIV, en la forma siguiente:
div id=miGrupo onclick="hacerActualización()"
h1La Imagen /h1
img SRC="imagen.gif"
/div
A continuación, cuando el usuario pulse en el elemento H1 o en el elemento IMG, el navegador comprobará si poseen gestores de sucesos para onclick. No es así.
Sin embargo, a continuación el navegador comprueba si el predecesor de los elementos H1 y IMG posee ese gestor de sucesos. Así es, así que entonces el navegador ejecuta el gestor onclick del elemento DIV para gestionar los sucesos de los elementos H1 y IMG. Esto proporciona el mismo comportamiento que efectuar un enlazado con cada elemento individual, pero sin utilizar tanto código.
El ahorro de código y de complejidad de este ejemplo es relativamente mínimo. Sin embargo, el burbujeo de sucesos puede significar un enorme ahorro de tiempo con documentos ricos en sucesos. Imagine que tuviera varios centenares de elementos y que desease utilizar gestores de sucesos similares para ellos, y que tuviera que asignar individualmente los gestores de sucesos a todos y cada uno de esos elementos.
Descubriendo dónde ha comenzado el burbujeo de sucesos
Dado que el burbujeo de sucesos recorre todo el camino ascendiendo por la jerarquía, es posible que acaben por ser invocados unos cuantos gestores de sucesos. Si está uno escribiendo un gestor de sucesos correspondiente a la parte superior de la jerarquía, quizá resulte ventajoso conocer dónde ha comenzado a burbujear un suceso.
La propiedad window.event.srcElement permite obtener esta información. Cuando se recibe un suceso que ha burbujeado, la propiedad srcElement contiene el elemento de HTML que recibiera por primera vez el suceso antes de que empezara a ascender.
Cancelación del burbujeo de sucesos
HTML Dinámico hace burbujear los sucesos hasta la parte superior de la jerarquía de contención, salvo indicación expresa en contra, así que aun cuando el suceso se gestione en el nivel del elemento, seguirá llegando hasta la cima del objeto documento.
Esto puede resultar sorprendente, así que considere cómo funciona el burbujeo de sucesos en el ejemplo inicial de burbujeo de sucesos. La gestión de sucesos siempre comienza en el elemento en el cual se produce el suceso, así que si se ha pulsado en el elemento H1, entonces se desencadenará un suceso onclick para el elemento H1. Entonces se desencadenará el suceso onclick para el elemento DIV que rodea al elemento H1. ¿Qué sucede si sólo se desea que se proporcione el suceso al elemento H1 y no al elemento DIV? La cancelación del burbujeo de sucesos permite hacer esto.
Normalmente, tiene sentido permitir que HTML Dinámico haga uso de su comportamiento por omisión. Se pueden encontrar casos, sin embargo, en los que se desee detener el burbujeo de sucesos en un punto concreto de la jerarquía. HTML Dinámico permite hacer esto mediante la propiedad window.event.cancelBubble.
La forma correcta de utilizar la propiedad cancelBubble consiste en enlazar un gestor de sucesos en aquel punto de la jerarquía en el que se desea que se detenga el burbujeo de sucesos. Entonces, en el gestor de sucesos, se da a la propiedad window.event.cancelBubble el valor verdadero.
Descripcion de los eventos mas comunes.
El concepto más fundamental de la gestión de sucesos es precisamente el concepto de suceso. Un suceso es una notificación del navegador referente a que el estado de las cosas ha cambiado de algún modo, y normalmente como consecuencia de que el usuario haya llevado a cabo una cierta acción.
Todos los tipos de sucesos se pueden generar y también se pueden gestionar mediante guiones. Muchos de los sucesos más comunes y gran parte de la forma en la que se gestionan con lenguajes de guiones se describirá posteriormente en este capitulo. Aunque existen muchos tipos de sucesos, los sucesos básicos se pueden descomponer en cuatro tipos distintos.
Sucesos de teclado
El suceso de teclado más básico es el que genera el usuario al pulsar una tecla. Sin embargo, existen sucesos distintos para la pulsación de una tecla y para el momento en que se suelta la tecla, y también sucesos para el caso en que se pulsen combinaciones de teclas, tales como A y la tecla de Mayúsculas, por ejemplo. También existe un suceso correspondiente a la situación en la que se pulse la tecla de ayuda.
Sucesos de ratón
Los sucesos de ratón son los tipos de sucesos más comunes en HTML Dinámico, porque la forma principal de interaccionar del usuario con las páginas de la red es a través del uso de un ratón. De forma muy similar a los sucesos del teclado, los sucesos para pulsar con el botón del ratón, para mantenerlo pulsado, y para soltarlo son todos ellos distintos, además, existe un suceso para el caso en que el usuario pulse dos veces con el botón del ratón. Por último, se pueden generar sucesos mediante el movimiento del ratón, independientemente de sí se pulsa o no el botón del ratón.
Sucesos de foco
Se pueden generar sucesos cuando un elemento adquiere nuestra atención, y también cuando la pierde. Si no está familiarizado con el concepto de foco, se describirá más adelante en la sección «Sucesos de foco y selección», pero por el momento basta saber que el foco es un concepto que se utiliza para describir con cuál de los elementos de la página está interaccionando en este momento el usuario.
Sucesos de cambio de estado
Estos sucesos no son generados necesariamente por interacción con el usuario. Más bien, se pueden generar sucesos de cambio de estado cuando el estado del documento cambia de manera importante. Por ejemplo, se puede generar un suceso cuando el documento ya se ha cargado en proporción suficiente para que el usuario pueda interactuar con él, o también se puede generar otro suceso cuando ya se haya cargado por completo el documento.
Ya se han discutido algunos de los sucesos más comunes de entre los que se emplean en HTML Dinámico, tales como puedan ser onclick, onmouseup y onmousedown. Se trata de un subconjunto de una clase de sucesos generales de HTML Dinámico que serán posiblemente los sucesos que más se utilicen.
Estos sucesos generales están disponibles para todos los elementos del documento. Quizá existan elementos individuales que puedan poseer sucesos adicionales especificas para ellos, pero se garantiza que todos los tipos de elemento tendrán accesos a estos sucesos generales.
Los sucesos generales de los cuales se garantiza que están disponibles para todos los elementos son los sucesos de ratón y de teclado. Además de estos tipos de sucesos, los sucesos de foco y de cambio de estado se tratan también y los tipos de elementos con los cuales se pueden utilizar se discutirán a continuación.
Sucesos de ratón
Los sucesos de ratón están relacionados todos ellos con que el usuario lleve a cabo algún tipo de acción con el ratón. El usuario puede efectuar dos tipos generales de acciones con el usuario: pulsar con uno de los botones del ratón o desplazar el puntero del ratón dentro de la ventana del navegador.
Los primeros sucesos que se tratan en esta sección son los sucesos generados cuando el usuario pulsa con el botón del ratón. Estos sucesos relacionados con el botón del ratón se proporcionan según un orden preestablecido de la siguiente manera:
onmousedown
onmouseup
onclick
ondblclick
A continuación, se estudiarán los sucesos que se generan cuando el usuario mueve el ratón. De forma muy similar con los sucesos relacionados con el botón del ratón, los sucesos relacionados con el movimiento del ratón se producen por un orden especifico:
onmouseover
onmousemove
onmouseenter
onmousedown
El suceso onmousedown se desencadena cuando el usuario pulsa un botón del ratón mientras éste se encuentra por encima del objeto. Una sutileza importante del suceso onmousedown es que se invoca antes del suceso onclick.
onmouseup
El suceso onmouseup se desencadena cuando el usuario suelta el botón del ratón cuando éste se encuentra por encima de un objeto. A diferencia del suceso onmousedown, el suceso onmouseup se invoca después del suceso onclick.
onclick
El suceso onclick se desencadena cuando el botón del ratón se pulsa y se suelta mientras éste se encuentra por encima de un objeto. La información acerca del botón del ratón que se haya pulsado estará disponible en la propiedad window.event.button (véase la sección posterior titulada «Objeto window.event»).
ondblclick
El suceso ondblclick se desencadena cuando se pulsa dos veces con el botón del ratón mientras éste se encuentra por encima de un objeto. El botón del ratón tiene que pulsarse dentro del intervalo de tiempo que el sistema admita como propio de pulsar dos veces.
onmouseover
El suceso onmouseover se desencadena cuando el usuario mueve el puntero del ratón de tal modo que éste entre dentro del alcance de un objeto. Entonces no volverá a desencadenarse de nuevo hasta después de que el usuario saque el puntero del objeto y vuelva a introducirlo en él.
Introducción a las hojas de estilo
Las hojas de estilo representan un avance importante para los diseñadores de páginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus páginas. En los entornos científicos en que la Web fue concebida, la gente estaba más preocupada por el contenido de sus páginas que por su presentación. A medida que la Web era descubierta por un espectro mayor de personas de distintas procedencias, las limitaciones del HTML se convirtieron en fuente de continua frustración, y los autores se vieron forzados a superar las limitaciones estilísticas del HTML. Aunque las intenciones han sido buenas -- mejorar la presentación de las páginas web --, las técnicas para conseguirlo han tenido efectos secundarios negativos. Entre estas técnicas, que dan buenos resultados para algunas personas, algunas veces, pero no siempre ni para todas las personas, se incluyen:
* La utilización de extensiones propietarias del HTML
* Conversión del texto en imágenes
* Utilización de imágenes para controlar el espacio en blanco
* La utilización de tablas para la organización de las páginas
* Escribir programas en lugar de usar HTML
Estas técnicas incrementan considerablemente la complejidad de las páginas web, ofrecen una flexibilidad limitada, sufren de problemas de interoperabilidad, y crean dificultades para las personas con discapacidades.
Las hojas de estilo resuelven estos problemas al mismo tiempo que reemplazan al limitado rango de mecanismos de presentación del HTML. Con las hojas de estilo es más fácil especificar la cantidad de espacio entre líneas, el sangrado de las líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo de las fuentes, y otros muchos detalles.
Por ejemplo, la siguiente hoja de estilo CSS (almacenada en el fichero "especial.css") hace que el color del texto de un párrafo sea verde ("green") y lo rodea de un borde rojo ("red") continuo ("solid"):
P.especial {
color : green;
border: solid red;
}
Los autores pueden vincular esta hoja de estilo a su documento fuente HTML con el elemento LINK:
HTML soporta las siguientes características de hojas de estilo:
Colocación flexible de la información de estilo
Al colocar las hojas de estilo en ficheros separados es más fácil reutilizarlas. Algunas veces es útil incluir instrucciones de representación dentro del documento al que se aplican, ya sea agrupadas al comienzo del documento, o en atributos de los elementos a lo largo del cuerpo del documento. Para facilitar la gestión de estilos a nivel de sitio, esta especificación describe cómo utilizar los encabezados HTTP para especificar qué hojas de estilo se aplican a un documento.
Independencia de lenguajes de hojas de estilo específicos
Esta especificación no liga el HTML con ningún lenguaje de hojas de estilo en particular. Esto permite que se puedan usar otros lenguajes diferentes, desde los lenguajes más simples válidos para la mayoría de los usuarios, hasta los más complejos, útiles para una minoría de usuarios con necesidades muy especializadas. Todos los ejemplos que se incluyen en lo que sigue se sirven del lenguaje CSS (Hojas de Estilo en Cascada, Cascading Style Sheets, [CSS1]), pero también son posibles otros lenguajes de hojas de estilo.
Cascada
Se llama así a la capacidad que proporcionan algunos lenguajes de hojas de estilo tales como CSS que permiten que las informaciones de estilo provenientes de varias fuentes puedan combinarse. Éstas podrían ser, por ejemplo, las guías de estilo de una empresa, los estilos comunes a un grupo de documentos, y los estilos específicos de un documento en particular. Al almacenarse independientemente, las hojas de estilo pueden reutilizarse, lo cual simplifica las tareas de diseño y hace más efectiva la utilización de la memoria caché de la red. La cascada define una secuencia ordenada de hojas de estilo en la que las reglas de las últimas hojas tienen una prioridad mayor que las de las primeras. No todos los lenguajes de hojas de estilo soportan la cascada.
Dependencias de los medios
HTML permite a los autores especificar sus documentos de una manera independiente del medio. Esto permite a los usuarios acceder a las páginas web usando una amplia gama de dispositivos y medios, p.ej., pantallas gráficas para ordenadores bajo Windows, Macintosh OS y X11, dispositivos para aparatos de televisión, teléfonos adaptados y dispositivos portátiles PDA, navegadores basados en voz, y dispositivos táctiles Braille.
Las hojas de estilo, en contraste, se aplican a medios o grupos de medios específicos. Una hoja de estilo diseñada para una pantalla puede ser aplicable para una salida impresa, pero es de poca utilidad para los navegadores basados en voz. Esta especificación le permite definir categorías generales de medios a los que es aplicable una hoja de estilo dada. Esto permite a los agentes de usuario evitar la descarga de hojas de estilo que no sean apropiadas. Los lenguajes de hojas de estilo pueden incluir características para describir dependencias del medio dentro de una misma hoja de estilo.
Estilos alternativos
Los autores pueden querer ofrecer a los lectores varias maneras diferentes de ver un documento. Por ejemplo, una hoja de estilo para representar documentos compactos con fuentes pequeñas, o una que especifique fuentes más grandes para una lectura más fácil. Esta especificación permite a los autores especificar una hoja de estilo preferente así como hojas alternativas que se dirijan a medios o usuarios específicos. Los agentes de usuario deberían dar a los usuarios la oportunidad de seleccionar una de las hojas de estilo alternativas o incluso de desactivar las hojas de estilo completamente.
Consideraciones de rendimiento
Algunas personas han expresado su preocupación acerca de los posibles problemas de rendimiento relacionados con las hojas de estilo. Por ejemplo, la obtención de una hoja de estilo externa puede retrasar la presentación del documento al usuario. Algo parecido sucede si la cabecera del documento contiene un conjunto muy grande de reglas de estilo.
La propuesta actual resuelve estos problemas, pues permite a los autores incluir instrucciones de representación dentro de cada elemento HTML. Así, la información de representación siempre estará disponible en el momento en que el agente de usuario quiera representar cada elemento.
En muchos casos los autores sacarán partido de una hoja de estilo común a un grupo de documentos. En este caso, la distribución de reglas de estilo a lo largo del documento conducirá a un rendimiento peor que si se usara una hoja de estilo vinculada, ya que para la mayoría de los documentos la hoja de estilo ya estará almacenada en la caché local. La disponibilidad pública de hojas de estilo de calidad potenciará este efecto.
Añadir estilos al HTML
Nota. La hoja de estilo por defecto del HTML 4 que se incluye en [CSS2] expresa la información de estilo por defecto generalmente aceptada para cada elemento. Los autores, así como los implementadores, pueden encontrar en ella un recurso útil.
Los documentos HTML pueden contener reglas de hojas de estilo directamente, o bien pueden importar hojas de estilo.
Se puede usar cualquier lenguaje de hojas de estilo con HTML. Un lenguaje simple de hojas de estilo puede ser suficiente para la mayoría de los usuarios, pero para otras necesidades más especializadas pueden ser apropiados otros lenguajes. Esta especificación utiliza para los ejemplos el lenguaje de estilo llamado "Hojas de Estilo en Cascada" ("Cascading Style Sheets", [CSS1]), abreviado CSS.
La sintaxis de los datos de estilo depende del lenguaje de hojas de estilo.
Especificación del lenguaje de hojas de estilo por defecto
Los autores deben especificar el lenguaje de hojas de estilo de la información de estilo asociada con un documento HTML.
Los autores deberían usar el elemento META para especificar el lenguaje de hojas de estilo por defecto de un documento. Por ejemplo, para especificar que el valor por defecto es CSS, los autores deberían poner la siguiente declaración en la sección HEAD de sus documentos:
El lenguaje de hojas de estilo por defecto también puede ser establecido con encabezados HTTP. La declaración META de arriba es equivalente al encabezado HTTP siguiente:
Content-Style-Type: text/css
Los agentes de usuario deberían determinar el lenguaje de hojas de estilo por defecto de acuerdo con los siguientes pasos (ordenados de mayor a menor prioridad):
1. Si alguna declaración META especifica "Content-Style-Type", la última de ellas en el flujo de caracteres determina el lenguaje de hojas de estilo por defecto.
2. De otro modo, si algún encabezado HTTP especifica "Content-Style-Type", el último de ellos en el flujo de caracteres determina el lenguaje de hojas de estilo por defecto.
3. De otro modo, el lenguaje de hojas de estilo por defecto es "text/css".
Los documentos que incluyan elementos que especifiquen el atributo style pero que no definan un lenguaje de hojas de estilo por defecto son incorrectos. Las herramientas de creación deberían generar información de lenguaje de hojas de estilo por defecto (normalmente una declaración META) de modo que los agentes de usuario no tengan que atenerse al valor por defecto "text/css".
Información de estilo en línea
Definiciones de atributos
style = estilo [CN]
Este atributo especifica información de estilo para el elemento actual.
La sintaxis del valor del atributo style viene determinada por el lenguaje de hojas de estilo por defecto. Por ejemplo, para los estilos [[CSS2]] en línea, se usa la sintaxis de bloque de declaraciones descrita en la sección 4.1.8 (sin las llaves).
Este ejemplo CSS establece información sobre el color y el tamaño de la fuente del texto de un párrafo específico.
¿No son maravillosas las hojas de estilo?
En CSS, las declaraciones de propiedades son de la forma "nombre : valor" y están separadas por un punto y coma.
Para especificar información de estilo en línea para más de un elemento, los autores deberían usar el elemento STYLE. Para lograr una flexibilidad óptima, los autores deberían definir los estilos en hojas de estilo externas.
Información de estilo en cabecera: el elemento STYLE
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
type = tipo de contenido [CI]
Este atributo especifica el lenguaje de hojas de estilo de los contenidos del elemento y prevalece sobre el lenguaje de hojas de estilo por defecto. El lenguaje de hojas de estilo se especifica como un tipo de contenido (p.ej., "text/css"). Los autores deben proporcionar un valor para este atributo; no hay valor por defecto para este atributo.
media = descriptores de medios [CI]
Este atributo especifica el medio destino al que se dirige la información de estilo. Puede ser un solo descriptor de medios, o una lista de ellos separados por comas. El valor por defecto de este atributo es "screen" (pantalla).
Atributos definidos en otros lugares
* lang (información sobre el idioma), dir (dirección del texto)
* title (título del elemento)
El elemento STYLE permite a los autores poner reglas de hojas de estilo en la cabecera del documento. HTML permite cualquier número de elementos STYLE en la sección HEAD de un documento.
Los agentes de usuario que no soporten hojas de estilo, o que no soporten el lenguaje de hojas de estilo utilizado por un elemento STYLE en particular, deben ocultar los contenidos del elemento STYLE. Es un error representar el contenido como parte del texto del documento. Algunos lenguajes de hojas de estilo soportan sintaxis para ocultar el contenido a agentes de usuarios no conformes.
La sintaxis de los datos de estilo depende del lenguaje de hojas de estilo.
Algunas implementaciones de hojas de estilo pueden permitir una gama más amplia de reglas en el elemento STYLE que en el atributo style. Por ejemplo, con CSS, pueden declararse reglas dentro de un elemento STYLE para:
* Todas las apariciones de un elemento de HTML específico (p.ej., todos los elementos P, todos los elementos H1, etc.)
* Todas las apariciones de un elemento de HTML que pertenezcan a una clase específica (es decir, cuyo atributo class tome cierto valor).
* Las apariciones únicas de un elemento de HTML (es decir, cuyo atributo id tome cierto valor).
Las reglas de precedencia y herencia de las reglas de estilo dependen del lenguaje de hojas de estilo.
La siguiente declaración STYLE CSS pone un borde alrededor de todos los elementos H1 del documento y los centra en la página.
Para especificar que esta información de estilo sólo debería aplicarse a los elementos H1 de una clase específica, la modificamos como sigue:
Finalmente, para limitar el alcance de la información de estilo a una sola aparición de H1, establecemos el atributo id:
El control de medios es particularmente interesante cuando se aplica a hojas de estilo externas, ya que los agentes de usuario pueden ahorrar tiempo si obtienen de la red únicamente aquellas hojas de estilo que se apliquen el dispositivo actual. Por ejemplo, los navegadores basados en voz pueden evitar la descarga de hojas de estilo diseñadas para la representación visual. Veáse la sección sobre cascadas dependientes del medio para más información.
Hojas de estilo externas
Los autores pueden separar las hojas de estilo de los documentos HTML. Esto ofrece varias ventajas:
* Los autores y los administradores de sitios web pueden compartir hojas de estilo entre varios documentos (y sitios).
* Los autores pueden cambiar la hoja de estilo sin necesidad de hacer modificaciones en el documento.
* Los agentes de usuario pueden cargar hojas de estilo selectivamente (en función de los descriptores de medios).
Hojas de estilo preferentes y alternativas
HTML permite a los autores asociar cualquier número de hojas de estilo externas a un documento. El lenguaje de hojas de estilo define el modo en que interaccionan varias hojas de estilo (por ejemplo, las reglas de "cascada" de CSS).
Los autores pueden especificar cualquier número de hojas de estilo mutuamente excluyentes llamadas hojas de estilo alternativas. Los usuarios pueden seleccionar su hoja favorita según sus preferencias. Por ejemplo, un autor puede especificar una hoja de estilo diseñada para pantallas pequeñas y otra para usuarios con poca visión (p.ej., con fuentes grandes). Los agentes de usuario deberían permitir a los usuarios seleccionar las hojas de estilo alternativas.
El autor puede especificar que una de las alternativas es una hoja de estilo preferente. Los agentes de usuario deberían aplicar la hoja de estilo preferente del autor a menos que el usuario haya seleccionado una alternativa diferente.
Los autores pueden agrupar varias hojas de estilo alternativas (incluyendo las hojas de estilo preferentes del autor) bajo un nombre de estilo común. Cuando un usuario selecciona un nombre de estilo, el agente de usuario debe aplicar todas las hojas de estilo con ese nombre. Los agentes de usuario no deben aplicar hojas de estilo alternativas con un nombre de estilo diferente. La sección sobre especificación de hojas de estilo externas explica cómo dar un nombre a un grupo de hojas de estilo.
Los autores también pueden especificar hojas de estilo persistentes que los agentes de usuario deben aplicar además de cualquier hoja de estilo alternativa.
Los agentes de usuario deben respetar los descriptores de medios al aplicar cualquier hoja de estilo.
Los agentes de usuario también deberían permitir a los usuarios deshabilitar completamente las hojas de estilo del autor, en cuyo caso el agente de usuario no debería aplicar ninguna hoja de estilo persistente ni alternativa.
Especificación de hojas de estilo externas
Los autores especifican hojas de estilo externas mediante los siguientes atributos del elemento LINK:
* Haciendo el valor de href igual a la localización del fichero de la hoja de estilo. El valor de href es un URI.
* Haciendo que el valor del atributo type indique el lenguaje del recurso (hoja de estilo) vinculado. Esto permite al agente de usuario evitar la descarga de una hoja de estilo cuyo lenguaje no soporte.
* Especificando si la hoja de estilo es persistente, preferente, o alternativa:
o Para hacer una hoja de estilo persistente, se hace el atributo rel igual a "stylesheet" y no se establece el atributo title.
o Para hacer una hoja de estilo preferente, se hace el atributo rel igual a "stylesheet" y se da un nombre a la hoja de estilo mediante el atributo title.
o Para especificar una hoja de estilo alternativa, se hace el atributo rel igual a "alternate stylesheet" y se da un nombre a la hoja de estilo mediante el atributo title.
Los agentes de usuario deberían posibilitar a los usuarios ver la lista de estilos alternativos y escoger uno de ellos. Se recomienda que el nombre de cada opción sea el valor del atributo title.
En este ejemplo, especificamos en primer lugar una hoja de estilo persistente localizada en el fichero miestilo.css:
Si establecemos el atributo title la convertimos en la hoja de estilo preferente del autor:
Si añadimos la palabra clave "alternate" al atributo rel la convertimos en una hoja de estilo alternativa:
Para más información sobre hojas de estilo externas, consulte la sección sobre vínculos y hojas de estilo externas.
Los autores también pueden usar el elemento META para establecer la hoja de estilo preferente del documento. Por ejemplo, para especificar que la hoja de estilo preferente sea "compacto" (ver el ejemplo precedente), los autores pueden incluir la siguiente línea en el HEAD:
La hoja de estilo preferente también se puede especificar mediante encabezados HTTP. La declaración META precedente es equivalente a este encabezado HTTP:
Default-Style: "compacto"
Si hay dos o más declaraciones META o encabezados HTTP que especifiquen la hoja de estilo preferente, la que prevalece es la última. A estos efectos, se considera que los encabezados HTTP aparecen antes que la sección HEAD del documento.
Si hay dos o más elementos LINK que especifiquen una hoja de estilo preferente, el que prevalece es el primero.
Las hojas de estilo preferentes especificadas con un elemento META o con encabezados HTTP prevalecen sobre las especificadas con el elemento LINK.
Hojas de Estilo en Cascada
Los lenguajes de hojas de estilo en cascada, tales como CSS, permiten que se pueda combinar la información de varias fuentes. Sin embargo, no todos los lenguajes de hojas de estilo soportan la cascada. Para definir una cascada, los autores especifican una secuencia de elementos LINK y/o STYLE. La información de estilo se combina en cascada según el orden en que aparecen los elementos en la sección HEAD.
Nota. Esta especificación no especifica cómo se combinan en cascada hojas de estilo de lenguajes de hojas de estilo distintos. Los autores deberían evitar mezclar lenguajes de hojas de estilo.
En el siguiente ejemplo, especificamos dos hojas de estilo alternativas llamadas "compacto". Si el usuario selecciona el estilo "compacto", el agente de usuario debe aplicar ambas hojas de estilo externas, así como la hoja de estilo persistente "comun.css". Si el usuario selecciona el estilo "tipos grandes", sólo se aplicarán la hoja de estilo alternativa "tgrandes.css" y "comun.css".
Cascadas dependientes del medio
Una cascada puede incluir hojas de estilo aplicables a medios diferentes. Tanto LINK como STYLE pueden usarse con el atributo media. El agente de usuario es por tanto responsable de filtrar aquellas hojas de estilo que no se apliquen al medio actual.
En el siguiente ejemplo, definimos un cascada en la cual se incluyen varias versiones de la hoja de estilo "empresa": una diseñada para su impresión, otra para la pantalla y otra para navegadores basados en voz (útil, por ejemplo, para leer correo electrónico en el coche). La hoja de estilo "informe" se aplica a todos los medios. La regla de color definida por el elemento STYLE se usa para impresoras y pantallas, pero no para la representación auditiva.
Herencia y cascada
Cuando el agente de usuario quiere representar un documento, necesita encontrar valores para las propiedades de estilo, p.ej., la familia tipográfica, el tamaño de fuente, la altura de línea, el color del texto, etc. El mecanismo exacto depende del lenguaje de la hoja de estilo, pero en general es válida la descripción siguiente:
Se utiliza el mecanismo de cascada cuando varias reglas de estilo se aplican directamente a un mismo elemento. El mecanismo permite al agente de usuario ordenar las reglas según su especificidad para determinar la regla a aplicar. Si no encuentra ninguna regla, el siguiente paso depende de si la propiedad de estilo puede ser heredada o no. No todas las propiedades se heredan. Para estas propiedades el lenguaje de la hoja de estilo proporciona unos valores por defecto que son los que se usan cuando no hay reglas explícitas para un elemento en particular.
Si la propiedad puede ser heredada, el agente de usuario examina el elemento contenedor inmediato para ver si hay alguna regla que se aplique a él. Este proceso continúa hasta que se encuentra alguna regla aplicable. Este mecanismo permite que las hojas de estilo puedan definirse de una manera compacta. Por ejemplo, los autores pueden especificar la familia tipográfica de todos los elementos contenidos en BODY con una sola regla que se aplique al elemento BODY.
Ocultar datos de estilo a los agentes de usuario
Algunos lenguajes de hojas de estilo soportan sintaxis pensada para permitir a los autores ocultar el contenido de los elementos STYLE a los agentes de usuario no conformes.
Este ejemplo ilustra cómo comentar en CSS el contenido de los elementos STYLE para asegurarse de que los agentes de usuario antiguos y no conformes no lo representarán como texto.
Vinculación de hojas de estilo mediante encabezados HTTP
Esta sección sólo se aplica a los agentes de usuario conformes con las versiones de HTTP que definan un campo de encabezado Link. Obsérvese que HTTP 1.1, tal y como se define en [RFC2616], no incluye un campo de encabezado Link (ver sección 19.6.3).
Los administradores de servidores web pueden creer conveniente configurar un servidor de modo que una hoja de estilo se aplique a un grupo de páginas. El encabezado HTTP Link tiene el mismo efecto que un elemento LINK con los mismos atributos y valores. Varios encabezados Link corresponderían a varios elementos LINK que aparecieran en el mismo orden. Por ejemplo,
Link:
Suscribirse a:
Entradas (Atom)
