Tener un buen sitio web implica que tengas un balance de todo: velocidad, buen contenido, estabilidad a nivel de código, y buen apartado visual. Para lograr este último aspecto, se debe incluir código que complemente al contenido. ¿Quieres darle un toque extra de personalidad? Te comentaremos sobre la marquesina HTML, y para qué sirve. ¡Atento (a)!
Ciertamente, el diseño visual tiene muchísimo que ver para llamar la atención del usuario; y aunque no representa el 100% de lo que se debe pulir, sí que añade valor a la experiencia de uso.
Por ende, cuidar de dicho aspecto en un proyecto web es esencial; y para ello se debe incluir colores, y efectos dentro de la interfaz. ¿Qué te parecería un texto en movimiento? He ahí el poder tras este fragmento de código; ya que la marquesina HTML es una ventana donde se mostrará texto en movimiento.
Pero antes de comentarte sobre cómo usarla y configurarla; repasemos un poco sobre lo que es el HTML. Muchas veces se confunde este tipo de lenguaje y se cataloga como de “programación”.
La realidad es que el Hiper Text MarkupLanguage, es un conjunto de etiquetas que buscan darle personalidad a un sitio web, desde su estructura básica hasta la inclusión de contenido multimedia. Desde sus inicios en 1991 se consideró como un estándar; y en pleno 2019 ya contamos con su quinta versión (HTML5).
Dentro de su conjunto de etiquetas encontramos a la mencionada marquesina de texto. Como mencionamos, es una ventana donde mostrarás un conjunto de caracteres en movimiento. Es totalmente personalizable, pudiendo el usuario modificar la velocidad, tipografía (tamaño, color, tipo) y sobre todo, que sucederá al mostrarse todo el texto como tal.
¿Cómo implementar una marquesina HTML en tu sitio web?
Implementarlo a nivel de HTML5 es sencillo; únicamente necesitamos incluir la etiqueta “marquee”. Veamos un ejemplo:
<marquee> Aquí va tu texto </marquee>
Como casi todas las etiquetas dentro de HTML, se debe abrir y cerrar; dentro de ellas colocarás tu texto, tal como vimos en el ejemplo. Obviamente, en el medio de las dos etiquetas irá tu texto personalizado.
- Cambiando la dirección en la que se muestra texto
Además, puedes incluir código para personalización, tal como cambiar la dirección a donde se mueva el texto. Por defecto está configurada de izquierda a derecha, ¡podemos cambiarla! Veamos cómo:
<marqueedirection=”right”> Aquí va tu texto </marquee>
Las posibilidades son muchas; puedes cambiar la dirección para que se muestre de arriba abajo o de abajo hasta arriba. ¿Cómo? Simplemente añadiendo los atributos “up” o “down” dentro de “direction”. ¿Quieres saber más? No te preocupes, que existe muchísimo más por descubrir en las marquesinas HTML.
Dicho esto, hay formas de que en cambies la animación, y, por si fuera poco, añadas imágenes al texto. De esta forma tendríamos un anuncio permanente, no intrusivo y que no consume muchos recursos (así la web no tardará demasiado en cargar).
- Añadiendo una imagen para acompañar al texto
Para incluir una imagen y que esta acompañe el texto, solo basta con insertar este código:
<marquee>Tu TEXTO<imgsrc=”imagen.gif” width=”100″ height=”300″ alt=”atributoalt ” border=”0″></marquee>
Dentro de la etiqueta “imgsrc” deberás incluir la dirección (local o web) de donde será extraída tu imagen; incluyendo su formato. En el caso del ejemplo mostrado, al ser del tipo .GIF, dicha extensión es colocada posterior al punto.
Adicionalmente debes indicar el ancho y largo, al igual que los atributos “alt”. Este último es usado por Google para posicionamiento SEO, así que tenlo mucho en cuenta.
- Cambiando el color de fondo y fuente
Si eres de los que les encanta resaltar algún texto de la web (atrae muchísimo la mirada del usuario), es posible que cambies el color de fondo o background en la marquesina. Simplemente basta con añadir el atributo “background”.
Ejemplos de marquesinas HTML
Marquesina CSS
Marquesina CSS3
Efectos de marquesina de texto en 3D
Un poco de historia sobre la marquesina HTML y sus inicios
Ahora bien, la etiqueta fue lanzada por Microsoft y, de hecho, no se comentó ninguna información en su momento para la organización encargada de los estándares internacionales ISO. Todo fue bajo “secreto”.
Lo curioso de todo es que, aunque solo pretendía funcionar para el tan recordado navegador Internet Explorer; terminó siendo abrazada por todo el conjunto de navegadores que conocemos hoy en día.
La etiqueta no solo se mantuvo en HTML, sino que trascendió a otros lenguajes, unos enfocados en diseño y estilos como CCS, y otros para mejorar todo un conjunto de características, tales como Javascript (que no debe confundirse con Java).
Conclusión
Toda web debe tener una sección pequeña de su interfaz para introducir anuncios de texto, incluyendo las marquesinas. No sobre satures, pero tampoco dejes de implementarla.
¿Preparado para añadir tu nueva marquesina a tu web? Es un pequeño detalle, pero como siempre, aporta para mejorar la experiencia de uso. Con nuestro artículo estamos seguros de que podrás sacarle provecho en todo momento. Te recomendamos que juegues con los colores de fondo, movimiento y tipografías.
