Marquesinas

En este articulo colocaremos varios ejemplos de lo que es una marquesina dentro de un diseño de html, pero antes de esto les explico para que nos sirve.


Marquesinas (Marquee):

Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto y es una de esas etiquetas no estándar de HTML, que soportan los navegadores más comunes, pero que no están comprendidas dentro de las especificaciones de HTML.
 Sirve para animar elementos dentro de la página. En concreto permite que el contenido que pongamos dentro de la etiqueta, ya sea texto, fotografías, o las dos cosas, se desplace horizontalmente por la página.
Las marquesinas sirven para las personas que trabajan en HTML y quieren incorporar un tipo simple de animación en sus sitios. Una solución fácil para hacer una animación con HTML es hacer uso de Marquee.

Nota:Como la imagen lo explica la marquesina o marquee no fueron parte de la colección oficial estándares HTML aprobada por el Consorcio W3, las etiquetas <blink> y <marquee> para muchos diseñadores web la utilización de estas etiquetas son simplemente... horripilantes. 

Para utilizar la etiqueta marquee, simplemente colocaremos dentro de la etiqueta los contenidos que queremos que se muevan, ya sean texto, imágenes o cualquier otro tipo de contenido.

<marquee>BloggAyuda Marquee</marquee>

Ejemplo:

BloggAyuda Marquee

• Como en el ejemplo aun no hemos añadido ningún atributo dentro de la etiqueta, el comportamiento de la marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una línea y el texto se desplaza lentamente de derecha a izquierda. 

Para tener un concepto mas amplio de lo que es la etiqueta colocare los atributos donde podemos modificar su comportamiento o aspecto.

WIDTH y HEIGHT: 

Ajustan la anchura y altura, respectivamente de la marquesina. Pueden ser igual a un número de pixels, o a un porcentaje de la pantalla.

Ejemplo:

<MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE>

Resultado:

Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels

ALIGN 

Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo).

Ejemplo:

<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "¡Hola!" estará alineada con la parte inferior de la marquesina</MARQUEE> ¡Hola!

Resultado:

La palabra "¡Hola!" estará alineada con la parte inferior de la marquesina ¡Hola!

DIRECTION:
Hacia donde queremos que se displace el contenido del marquee. Los posibles valores son "LEFT" y "RIGHT".

Ejemplo:

<MARQUEE DIRECTION=RIGHT> Este texto se dirije hacia la derecha </MARQUEE>

Resultado:

Este texto se dirige hacia la derecha


BEHAVIOR:
Es el comportamiento de la marquesina, de entre los posibles: SCROLL (el comportamiento por defecto) indica que tiene que hacer el desplazamiento siempre en una misma dirección,   SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para ahí. y ALTERNATE, que indica que el desplazamiento se hace a un lado y al otro de manera alternada.


Ejemplo:

<MARQUEE BEHAVIOR=ALTERNATE>Este texto se mueve a un lado y otro, sin desaparecer</MARQUEE>

Resultado:

Este texto se mueve a un lado y otro, sin desaparecer

SCROLLDELAY:
Es el tiempo en milisegundos que tiene que pasar entre cada cambio de la posición de lo que hay desplazándose.


 Ejemplo:

<MARQUEE SCROLLDELAY =200> Blogg Ayuda Espera entre cada salto </MARQUEE>

Resultado:

Blogg Ayuda Espera entre cada salto


SCROLLAMOUNT:
Es la cantidad de pixel que tiene que desplazarse el contenido de la marquesina cada vez que se mueve.


Ejemplo:

<MARQUEE SCROLLAMOUNT=50> Blogg Ayuda Spedd </MARQUEE>

Resultado:

Blogg Ayuda Spedd




LOOP:
El número de ciclos que va a moverse el texto o lo que quiera que haya dentro de la marquee. Este atributo sólo funciona en Internet Explorer. Por defecto es INFINITE, que quiere decir que se desplazará todo el tiempo sin parar.

BGCOLOR: 
El color de fondo de la marquesina. Acepta el nombre de un color HTML o bien un valor RGB de dicho color.


Ejemplo:

<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE>

Resultado:

Esta marquesina tiene un fondo de color rosa


HSPACE y VSPACE:
Estos dos atributos sirven para definir el número de píxel que debe aparecer entre la marquesina y otros contenidos de la página, en horizontal y vertical.

Nota: Recuerda que dentro de una marquesina puedes colocar una imagen, o texto con imagen, o una tabla con texto, hay varias formas de trabajar con marquee, pero eso solo depende si gustas de hacerlo, estos son solo ejemplos de lo que se puede lograr.

Posted in: HTML5