Inserta una animación Html5 en un iframe
Computer Hoy
Añade un iframe en tu web
En el caso de que, por ejemplo, hayas convertido una animación en Flash a Html5, tal y como mostramos en el artículo Convierte archivos Flash a HTML5, habrás comprobado que el código que se genera es demasiado largo y complejo cómo para añadirlo directamente sobre la página donde lo quieres incluir. De hacerlo así, el peso de la página aumentaría mucho, además de resultar, seguramente, mucho más difícil de indexar por los motores de búsqueda.
La mejor solución en este caso, es añadir un iframe, es decir un marco o una pequeña “ventana” dentro de la página que va a contener, a su vez, otra página html, en este caso, la animación en Html5. El código para añadir un iframe dentro de una página web es muy sencillo. Basta con copiar el siguiente código en el punto donde lo quieras insertar:
<iframe src="nombre.html" width="xxx" height="xxx" >
Texto alternativo para los usuarios que no ven iFrames.
</iframe>
Con esto, quedaría resuelto tu problema. Se trata de un ejemplo muy sencillo en el que hemos añadido el nombre de la página que quieres visualizar y le hemos asignado un ancho y un alto a través de los atributos width y height, respectivamente.
Si no tienes muy claro qué dimensiones debe tener el iframe para que se muestre correctamente la animación generada en Html5, puedes consultarlo en el código fuente de este documento. Aunque es bastante completo, debes saltar el código del script y fijarte casi al final, donde se encuentra la etiqueta <body> desde donde se hace la llamada al mismo.
Por tanto, sólo debes añadir el nombre de la página web e indicar el tamaño del marco, que ya sabes. En este ejemplo:
<iframe src="automatismo.html" width="564" height="227" >
Texto alternativo para los usuarios que no ven iFrames.
</iframe>
Como puedes comprobar, hemos añadido un pequeño texto entre medias de las etiquetas que abren y cierran el iframe. Se trata de un texto alternativo que puedes editar a tu antojo, y que aparecerá en aquellos casos en la que la versión de navegador desde el que se visualiza la página no sea compatible con este elemento. También puedes sustituir el texto por una imagen estática.
Una vez que termines, puedes hacer una comprobación visualizando la página en el navegador. En este ejemplo, puedes visualizar que la página con la animación realizada en Html5 se ha añadido sin problemas, dentro de la principal.
Atributos de un iframe
Como has podido comprobar, el código necesario para generar un iframe es muy sencillo. No obstante, dispones de algunos atributos con los que puedes conseguir hacerlo más atractivo.
Algunos de ellos son:
Frameborder= “1/0”: añade un borde al marco
Marginwidth “% píxeles”: añade un margen en los laterales en el porcentaje indicado
Marginheight “% píxeles”: añade un margen en el extremo superior e inferior del marco, en el porcentaje indicado
Scrolling=”yes/no/auto”: genera una barra de scroll en el caso de que sea necesario para mostrar el contenido de la página dentro del iframe.
Align="left/center/right": ajusta el contenido del iframe a un lado u otro de la ventana.
Puedes añadir estos atributos junto con la etiqueta que te hemos mostrado. Por ejemplo, si quieres añadir un pequeño borde alrededor del marco, puedes incluir la propiedad: frameborder= “1”.
Por último, comprueba en el navegador que, efectivamente, se ha añadido el borde que acabas de indicar.
Conoce cómo trabajamos en Computerhoy.