2 minute read
2.5 Presentador Fathom
from Presentadores HTML5
Haz clic en la primera diapositiva y luega usa las teclas de desplazamiento, también puedes arrastar las cinta de diapositivas con la barra scroll horizontal, que aparece en la parte inferior.
El presentador Fathom es muy similar al Google I/O Slides pero, como se observa arriba, las diapositivas de los extremos presentan un nivel de opacidad, que permite destacar la diapositiva central. Este presentador fue diseñado por Marcos Dalgleish en 2011, con la siguiente licencia:
Advertisement
Se concede permiso, de forma gratuita, a cualquier persona que obtenga una copia de este software y archivos de documentación asociados (el "Software ").
Para trabajar con el Software sin restricción, incluyendo sin limitación, los derechos para usar, copiar, modificar, fusionar , publicar, distribuir, sublicenciar y / o vender copias del Software.
Una primera modificación, que podemos realizar, es cambiar el estilo de presentación, que por defecto es "multi", tal como aparece al inicio del archivo index.html:
Si lo cambiamos por "single", el presentador tendrá similitudes al Deck.js y DZSlides.
El diseño de las diapositvas es similar a como lo hemos hecho en los tres presentadores anteriores, por lo que no nos detendremos a explicarlo. La diferencia se encuentra en su contenedor que, para este caso, se usa la etiqueta de bloque <div>. Observa. por ejemplo, la primera diapositiva:
En nuestro ejemplo, sólo por practicar, hemos puesto tres escena interactivas del Proyecto Un_100 y algunas referidas a las nuevas etiquetas del HTML5.
Una característica que hace especial este presentador, es la posibilidad de sincronizar la presentación con un vídeo de Vimeo, a través de una línea de tiempo:
Según la imagen anterior, la segunda diapositiva se presentará, automáticamente, a los cinco segundos, la tercera a los 20, la cuarta a los 40, etc. A continuación, presentamos el ejemplo que trae el presentador original. Te invitamos a que lo explores, pues además de la línea de tiempo, se debe incluir la fuente del vídeo y su código.
Haz clic sobre la primera diapositiva y debe aparecer, en la parte inferior izquierda, el vídeo, reprodúcelo... y observa... y ¡escucha!
Este ejmplo lo encuentras en la carpeta test con una línea de tiempo en diferentes formato, pero puedes cambiarlos con números únicamente:
