Las etiquetas META sirven también para especificar transiciones entre páginas, sólo para Explorer.
Otra de las utilidades de las etiquetas META de HTML es la realización de transiciones entre páginas. Estas transiciones permiten que, al pasar de una página a otra, se cambie de documento creando un sencillo efecto de gradiente, cortinilla, etc. como los que hemos podido ver principalmente en edición de vídeo. Estas transiciones tienen un único objetivo que es mejorar la estética de la página y no afectan para nada al funcionamiento de la misma.
Transiciones sólo son compatibles con Explorer
Las etiquetas META de transiciones sólo son compatibles con Internet Explorer, por lo que otros navegadores no las tendrán en cuenta para nada. Es decir, simplemente las ignorarán.
Nos podremos preguntar entonces: ¿Hasta que punto se hace interesante el uso de las transiciones con etiquetas META? Pues esa respuesta depende de cada desarrollador y de sus criterios personales. Unos directamente las descartarán por no servir para mucho y por no estar presentes en la mayoría de navegadores. Otros podrán decidir utilizarlas, puesto que no afectan para nada a los programas que no las interpretan y por ofrecer algo adicional en Internet Explorer.
En mi modesta opinión, las transiciones entre páginas no son necesarias para nada y algunas son un poco feas, por lo que no acostumbro a usarlas. No obstante, las estoy explicando en este artículo de DesarrolloWeb.com para el que le apetezca utilizarlas y dar un poco de dinamismo en su página, para los usuarios de Internet Explorer. Sobretodo, tener en cuenta que transiciones muy largas pueden ser molestas más que vistosas.
Uso de las META Transition
Las etiquetas META Transition, o META de transición, se definen con la etiqueta META, a la que se le indican dos atributos.
Atributo http-equiv:
Para indicar si la transición es para cuando se entra en la página o cuando se sale de ella.
Atributo content:
Para indicar el tipo de transición y la duración.
Un par de ejemplos de etiquetas meta de transición serían:
<meta http-equiv="Page-Enter" content="blendTrans(duration=1)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=0.5, transition=5)">
La primera define una transición cuando se entra en la página y la segunda una transición para cuando se sale de ella.
Estas etiquetas meta de transiciones se deben indicar, como cualquier otra etiqueta META, en el HEAD de la página. Pero con un detalle, si la página tiene un enlace con una hoja de estilos CSS externa, debe colocarse antes la transición de Page-Enter, si no no se verá. En general, las etiquetas META para transiciones no darán problemas si las colocamos inmediatamente después de haber iniciado el HEAD de la página.
Distintos tipos de transiciones entre páginas
Existen diversos tipos de transiciones que se pueden aplicar con el atributo content. En este artículo de desarrollo web .com no vamos a ver todos los tipos, pero al menos sí unos cuantos. En los ejemplos utilizamos constantemente un valor duration=1, que indica la duración de la transición en segundos. Veremos varios ejemplos de transiciones:
Para hacer Transiciones de tipo degradado utilizamos content="blendTrans(Duration=1)". Con esta transición en las que se muestran los contenidos con un fundido de menos a más. Al principio la opacidad de la página nueva es casi transparente y va cambiando hasta que se hace totalmente opaca.
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1)">
Otra amplia gama de transiciones las podemos hacer con un valor revealTrans en el atributo content: content="revealTrans(duration=1, transition=5)". Estos tipos de transiciones permiten mucha variedad cambiando los valores duration, que sirve para indicar la duración en segundos, y transition, que recibe un número entero con la transición que deseamos realizar. Veamos varios ejemplos:
Transición al salir de la página, de un círculo desde fuera a dentro y medio segundo de duración.
<meta http-equiv="Page-Exit" content="revealTrans(duration=0.5, transition=2)">
Transición al entrar en la página, de un cuadrado que va de dentro a fuera y de 1 segundo de duración.
<meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=1)">
Transición al salir de la página, que muestra la nueva página con una sucesión de pixel en lugares aleatorios, hasta que se rellenan todos los puntos de la nueva página.
<meta http-equiv="Page-Exit" content="revealTrans(duration=1, transition=12)">
Transición al entrar en la página, de una cortinilla que va de arriba a abajo.
<meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=5)">
Hasta aquí hemos visto varios tipos de transiciones, pero podemos obtener y probar por nosotros mismos otros valores de transition no tratados en este artículo de desarrolloweb.com. Obtendremos diversas transiciones, cambiando el valor transition, que permite valores enteros hasta al menos 22 transiciones distintas.
Para que se pueda ver esto de las transiciones, dejamos un ejemplo de transición.
Sólo quedaría decir que si una página tiene transición de entrada y de salida, la transición de salida sólo se verá en caso que la página que se vaya a mostrar no tenga definida una transición de entrada. En caso que sí tuviera una, se vería la transición de entrada de la nueva página en lugar de la de salida de la pagina donde venimos.
Transiciones sólo son compatibles con Explorer
Las etiquetas META de transiciones sólo son compatibles con Internet Explorer, por lo que otros navegadores no las tendrán en cuenta para nada. Es decir, simplemente las ignorarán.
Nos podremos preguntar entonces: ¿Hasta que punto se hace interesante el uso de las transiciones con etiquetas META? Pues esa respuesta depende de cada desarrollador y de sus criterios personales. Unos directamente las descartarán por no servir para mucho y por no estar presentes en la mayoría de navegadores. Otros podrán decidir utilizarlas, puesto que no afectan para nada a los programas que no las interpretan y por ofrecer algo adicional en Internet Explorer.
En mi modesta opinión, las transiciones entre páginas no son necesarias para nada y algunas son un poco feas, por lo que no acostumbro a usarlas. No obstante, las estoy explicando en este artículo de DesarrolloWeb.com para el que le apetezca utilizarlas y dar un poco de dinamismo en su página, para los usuarios de Internet Explorer. Sobretodo, tener en cuenta que transiciones muy largas pueden ser molestas más que vistosas.
Uso de las META Transition
Las etiquetas META Transition, o META de transición, se definen con la etiqueta META, a la que se le indican dos atributos.
Atributo http-equiv:
Para indicar si la transición es para cuando se entra en la página o cuando se sale de ella.
Atributo content:
Para indicar el tipo de transición y la duración.
Un par de ejemplos de etiquetas meta de transición serían:
<meta http-equiv="Page-Enter" content="blendTrans(duration=1)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=0.5, transition=5)">
La primera define una transición cuando se entra en la página y la segunda una transición para cuando se sale de ella.
Estas etiquetas meta de transiciones se deben indicar, como cualquier otra etiqueta META, en el HEAD de la página. Pero con un detalle, si la página tiene un enlace con una hoja de estilos CSS externa, debe colocarse antes la transición de Page-Enter, si no no se verá. En general, las etiquetas META para transiciones no darán problemas si las colocamos inmediatamente después de haber iniciado el HEAD de la página.
Distintos tipos de transiciones entre páginas
Existen diversos tipos de transiciones que se pueden aplicar con el atributo content. En este artículo de desarrollo web .com no vamos a ver todos los tipos, pero al menos sí unos cuantos. En los ejemplos utilizamos constantemente un valor duration=1, que indica la duración de la transición en segundos. Veremos varios ejemplos de transiciones:
Para hacer Transiciones de tipo degradado utilizamos content="blendTrans(Duration=1)". Con esta transición en las que se muestran los contenidos con un fundido de menos a más. Al principio la opacidad de la página nueva es casi transparente y va cambiando hasta que se hace totalmente opaca.
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1)">
Otra amplia gama de transiciones las podemos hacer con un valor revealTrans en el atributo content: content="revealTrans(duration=1, transition=5)". Estos tipos de transiciones permiten mucha variedad cambiando los valores duration, que sirve para indicar la duración en segundos, y transition, que recibe un número entero con la transición que deseamos realizar. Veamos varios ejemplos:
Transición al salir de la página, de un círculo desde fuera a dentro y medio segundo de duración.
<meta http-equiv="Page-Exit" content="revealTrans(duration=0.5, transition=2)">
Transición al entrar en la página, de un cuadrado que va de dentro a fuera y de 1 segundo de duración.
<meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=1)">
Transición al salir de la página, que muestra la nueva página con una sucesión de pixel en lugares aleatorios, hasta que se rellenan todos los puntos de la nueva página.
<meta http-equiv="Page-Exit" content="revealTrans(duration=1, transition=12)">
Transición al entrar en la página, de una cortinilla que va de arriba a abajo.
<meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=5)">
Hasta aquí hemos visto varios tipos de transiciones, pero podemos obtener y probar por nosotros mismos otros valores de transition no tratados en este artículo de desarrolloweb.com. Obtendremos diversas transiciones, cambiando el valor transition, que permite valores enteros hasta al menos 22 transiciones distintas.
Para que se pueda ver esto de las transiciones, dejamos un ejemplo de transición.
Nota: Recordar que las transiciones sólo se verán en Internet Explorer.
Sólo quedaría decir que si una página tiene transición de entrada y de salida, la transición de salida sólo se verá en caso que la página que se vaya a mostrar no tenga definida una transición de entrada. En caso que sí tuviera una, se vería la transición de entrada de la nueva página en lugar de la de salida de la pagina donde venimos.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...