PDF download Descargar el PDF PDF download Descargar el PDF

Una marquesina móvil es un texto en movimiento que se agrega a un sitio web. Esto ya casi no se hace con HTML, de hecho, no es recomendable. La etiqueta de HTML para marquesinas móviles se ha eliminado de la biblioteca estándar de este lenguaje. Para poder hacerlo, la mejor opción que hay actualmente es usar CSS ya que estos dos lenguajes se integran a la perfección en el diseño de sitios web modernos.

Método 1
Método 1 de 2:

Usar CSS

PDF download Descargar el PDF
  1. Si vas a usar una Mac, descarga la versión más reciente de WebKit . Como el módulo CSS que se utiliza para crear marquesinas es parte de la especificación WebKit, es necesario que esta plataforma esté instalada en tu equipo.
  2. A diferencia de lo que ocurre con Mac, no hay un instalador autoextraíble para Windows. Si vas a usar Windows necesitarás instalar una serie de herramientas para usar WebKit. Todas estas herramientas se pueden descargar desde aquí .
  3. Abre tu archivo HTML y agrégale una referencia a la hoja de estilos CSS utilizando el siguiente código:
    . <head>
    <link rel="stylesheet" type="text/css" href="miestilo.css">
    </head>
    • Puedes escribir la referencia CSS antes de crear el archivo CSS, pero debes asegurarte de que el nombre del archivo coincida exactamente con el de tu código (en este caso, "miestilo.css").
    • El código HTML permanecerá separado del código CSS, pero ambos se ejecutarán juntos al cargar tu archivo HTML. [1]
  4. Tu código deberá verse similar al siguiente:
    . <div class="marquee">Aquí va el texto que se desplazará</div>
    • La etiqueta "div" es el elemento de HTML que define el área de la página que contendrá los componentes del código, en este caso, la marquesina móvil.
  5. Ve a "Archivo > Guardar como…". No olvides agregar la extensión .html al final del nombre del archivo.
  6. La sintaxis breve para crear una marquesina móvil con CSS es: "-webkit-marquee: [dirección] [incremento] [repetición] [estilo] [velocidad]". La etiqueta "webkit" es necesaria porque el módulo CSS que contiene la clase de la marquesina es parte de la especificación CSS de WebKit. [2]
    • [dirección] define en qué dirección se desplaza la marquesina
    • [incremento] determina la distancia en píxeles que hay entre cada paso del desplazamiento
    • [repetición] es la cantidad de veces que se reproducirá la marquesina
    • [estilo] determina si el desplazamiento de texto es simple o con rebote
    • [velocidad] determina qué tan rápido se desplazará el texto
  7. Establece estos valores entre corchetes (pero sin poner los corchetes, ya que aquí solo se usan para indicar la posición). De esta forma le indicarás a la marquesina cómo actuar en la página. Tu código deberá verse similar al siguiente:
    . -webkit-marquee: auto medium infinite scroll normal;
    • La dirección "auto" (de automático) es la predeterminada: de derecha a izquierda; "medium" (medio) establece un intervalo predeterminado de 6 píxeles; "infinite" (infinito) se usa para reproducir la marquesina en forma ilimitada; "scroll" (desplazamiento) hace que el estilo de movimiento sea lineal y "normal" es la configuración predeterminada de desplazamiento.
  8. Escribe <span style="font-size:0px"> en una línea nueva de código. Así el texto seguirá desplazándose en forma continua sin detenerse al llegar al borde de la división (etiqueta "div"). [3]
    • "overflow-x" especifica qué hacer con el texto que excede el límite de espacio sobre el eje "x"
    • "-webkit-marquee" dirige el comando "overflow" hacia el módulo de la marquesina en WebKit
    • El código completo deberá verse similar al siguiente:
      . -webkit-marquee: auto medium infinite scroll normal;
      overflow-x: -webkit-marquee;
  9. Ve a "Archivo > Guardar como…". No olvides agregar la extensión .css al final del nombre del archivo.
  10. Arrastra el archivo hacia el navegador y suéltalo allí para abrirlo. La marquesina móvil ahora se mostrará en la página.
    • Utiliza un navegador compatible con WebKit, como Chrome o Safari para asegurarte de que la marquesina se muestre según lo esperado.
    Anuncio
Método 2
Método 2 de 2:

Usar HTML

PDF download Descargar el PDF
  1. Ten en cuenta que el uso de la etiqueta "marquee" en HTML es anticuado y poco recomendable en términos de diseño. Los archivos HTML se pueden abrir con un simple editor de texto. Si vas a empezar desde cero, abre el editor e ingresa el siguiente código de ejemplo:
    • . <marquee style="background-color:#000080;" direction="right" loop="20" width="75%">Esta es una marquesina móvil</marquee>
  2. Puedes cambiar el fondo de la marquesina especificando un valor hexadecimal (hex) o RGB (por "Red Green Blue"; rojo, verde y azul en inglés) después de la parte de "background-color:" en el código. El valor predeterminado que aparece en el código de ejemplo, #000080, es azul marino.
    • Por ejemplo:
      . <marquee style="background-color:#000080;"></marquee>
    • Puedes buscar una lista de todos los colores con sus respectivos valores en Internet. [4]
  3. Cambia el atributo "direction" (dirección) en el código cualquiera de las siguientes direcciones: "right" (derecha), "left" (izquierda), "up" (arriba) o "down" (abajo).
    • Por ejemplo:
      . <marquee direction="right"</marquee>
  4. El atributo "loop" (bucle) controla la cantidad de veces que se repite el desplazamiento de la marquesina. Si quieres que lo haga en forma continua, deja este atributo en blanco.
    • Un ejemplo de código sin este atributo sería el siguiente:
      . <marquee style="background-color:#000080;" direction="right" width="75%">Esta es una marquesina móvil</marquee>
  5. El texto que esté dentro de las etiquetas <marquee> y </marquee> será el texto que se desplazará en la marquesina. Escribe ahí lo que quieras que diga tu marquesina.
    • Por ejemplo:
      . <marquee>¡Mira cómo se desplaza este texto!</marquee>
  6. Arrastra el archivo hacia el navegador y suéltalo allí para abrirlo. La marquesina móvil ahora se mostrará en la página.
    Anuncio

Consejos

  • Como la función "marquee" de CSS es parte de la especificación WebKit, su uso se limita a navegadores compatibles con WebKit como Chrome, Safari u Opera. Firefox e IE no son navegadores compatibles con WebKit.
  • Ten cuidado cuando vayas a cambiar los atributos en la marquesina HTML. Si olvidas cerrar comillas o cometes algún error, por más pequeño que sea, todo el código podría dejar de funcionar.
  • Si quieres agregar alguna de las increíbles funciones de CSS a tu marquesina, simplemente añade la clase o ID correspondiente.
Anuncio

Advertencias

  • El elemento <marquee> es obsoleto , lo cual significa que no es válido en HTML y no debe utilizarse. Las páginas podrían devolver un error si se usa esta etiqueta y esto podría causar problemas en algunos navegadores.
Anuncio

Acerca de este wikiHow

Esta página ha recibido 13 386 visitas.

¿Te ayudó este artículo?

Anuncio