Cómo crear una presentación en HTML5

HTML5, como el estándar de la próxima generación web, está a la vuelta de la esquina. ¿Añadirás compatibilidad HTML5 a tu sitio web? Tal vez es tiempo de por lo menos empezar a prepararse. Este artículo te mostrará 2 formas de crear presentaciones en HTML5 e insertarlas en tu sitio web.

Presentación en HTML5 de ejecución automática

Uno de las actualizaciones más notorias de HTML5 es que con él, puedes insertar y reproducir videos en línea directamente. De esta forma, tus visitantes podrán ver tu presentación en HTML5 siempre y cuando su navegador sea compatible con éste, sin necesidad de Flash Player. Debido a que HTML5 aún no se encuentra en su versión final, los códecs de video que probablemente se podrán utilizar son WebM, H264, Ogv o todos ellos.

Aquí está la guía de cómo insertar una presentación en video con HTML5:

<video poster="movie.jpg" controls> 
    <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/> 
    <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/> 
    <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
</video>

Si puedes ver el video más abajo, significa que tu navegador web también es compatible con HTML5. En la actualidad, la mayoría de navegadores web ya son compatibles y por ende capaces de reproducir presentaciones en HTML5. Ve más detalles acerca de los navegadores web compatibles con HTML5.

Presentación en video con HTML5 creada utilizando DVD Slideshow Builder Deluxe - Más de 100 transiciones incluidas.

Ahora, lo único que necesitas es un programa creador de presentaciones en HTML5, y por supuesto, crear la presentación de video en formato MP4 (AVC).

Download Win Version Download Mac Version

Presentación en HTML5 interactiva

Como las presentaciones en Flash utilizadas actualmente en los sitios web, también puedes diseñar una presentación en HTML5 si tener que instalar nada. Por supuesto, no tienes que escribir nada de código tú mismo. Más abajo tomamos como ejemplo una presentación en HTML5 muy compartida en la web para mostrarte cómo insertar una presentación en HTML5 en una página web.

1. Pon los archivos en el lugar correcto

Una vez que descargues el archivo del proyecto HTML5, descomprímelo en el PC y muévelo o súbelo a la carpeta de tu sitio web.

presentación en html5

También hay otras personas que comparten sus presentaciones en HTML5 en línea. Busca en Google una de ellas y cámbiala para que se adapte a tus necesidades. Es mejor incluir un aviso sobre los derechos de autor y cumplir con los términos de licencia para reconocer el trabajo de los demás y evitar meterse en problemas.

2. Cambia el código para ajustarlo a tus necesidades

Generalmente, no necesitas hacer cambios en el código de los archivos css y js, excepto por el enlace en caso de que tengas que ponerlos en una carpeta diferente. Por ejemplo, deberías cambiar la dirección de enlace del archivo CSS a ‘scripts/script.js’ si has movido el archivos script.js a una carpeta llamada ‘scripts’. Este tipo de dirección de enlace es llamada dirección relativa, mientras el otro tipo es llamada dirección absoluta, como por ejemplo http://tusitio.com/scripts/script.js. Si la presentación en HTML5 se inserta en una página dentro de una carpeta, deberás usar una dirección como ‘../scripts/script.js’. Será mejor que utilices una dirección absoluta si no estás familiarizado con las diferencias.

La parte más importante de la presentación en HTML5 se encuentra dentro de la caja con bordes rojos. Copia este código en cualquier página en la que quieras mostrar tu presentación en HTML5 y cambia la dirección de la imagen como fue descrito más arriba.

código de inserción de presentación en html5
Click to enlarge.

3. Pre-visualiza tu presentación en navegadores web compatibles con HTML5

Por último, ve cómo luce tu presentación en HTML5 utilizando un navegador web compatible con éste. Normalmente, verás esta presentación en HTML5. En la página anterior, también tendrás la opción de descargar los archivos de la presentación en HTML5 y ver el proceso detallado de cómo diseñarla, explicado por Martin Angelov.

Te recomendamos además que le eches un vistazo a las plantillas de presentaciones Flash, para crear presentaciones para tu sitio web en sólo unos cuantos clics del ratón.

Download Win Version Download Mac Version

¿POR QUÉ ELEGIR WONDERSHARE

100% SEGURO
Previsualización disponible; sólo lectura,sin pérdida de datos
10+

DEDICACIÓN DE AÑOS

PRIVADO
Ejecuta tu propio ordenador y manéjalo sólo tú
200+

PAÍSES EN EL MUNDO

DISEÑADO POR EL CLIENTE
Proporciona soluciones de datos ajustadas a tus necesidades
9 000 000+

USUARIOS DESTACADOS

Arriba