html-slides es una plantilla para crear diapositivas de presentación que se ejecutan directamente dentro de un navegador web. Para ver estas diapositivas en acción, eche un vistazo a la presentación de diapositivas de demostración.
Características de presentación
Funciones de diapositiva
Para crear la presentación a partir de sus diapositivas, Node.js debe estar instalado en la computadora.
La presentación se puede mostrar con cualquiera de los principales navegadores web (Firefox, Chrome, Edge, Safari, Opera,...), y no requiere ningún software adicional.
Descargue o clone el repositorio de diapositivas html y comience a crear su presentación dentro de la carpeta template . No necesita nada fuera de esta carpeta y puede cambiarle el nombre o moverla.
La carpeta template contiene los siguientes archivos y carpetas:
slides contiene sus diapositivas y sus recursos multimedia.index.build.html contiene la lista de diapositivas.deploy reúne sus diapositivas en un único archivo index.html .index.html es la presentación generada.style contiene el archivo de estilo CSS ( style.inc.css ) y las fuentes. Puede ajustar las fuentes y colores predeterminados aquí.skeleton contiene el código HTML, CSS y JavaScript para convertir tus diapositivas en una presentación. No es necesario modificar nada aquí. Una diapositiva suele ser un archivo con unas pocas líneas de código HTML o un archivo SVG. Para diapositivas de solo video o de solo imágenes, el esqueleto proporciona un código HTML predefinido.
El archivo index.build.html contiene el título y la secuencia de diapositivas de la presentación:
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
slide ( 'slides/title.inc.html' ) ;
slide ( 'slides/intro.inc.html' , 'Introduction' ) ;
slide ( 'slides/system.inc.svg' , 'System' ) ;
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;
slide ( 'slides/next-steps.inc.html' , 'Next steps' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >La primera y la última línea importan el esqueleto de la presentación y deben permanecer como están. Cada diapositiva toma los siguientes parámetros:
La extensión del archivo determina el tipo de diapositiva:
.inc.html son diapositivas HTML (ver más abajo)..inc.svg son diapositivas SVG (ver más abajo)..mp4 , .webm o .ogg son diapositivas de solo vídeo. Resultan en un reproductor de video que se muestra en la diapositiva. Quedan mejor con el estilo 'negro'..png , .jpg o .jpeg son diapositivas que solo contienen imágenes. Los estilos adecuados son "negro" (para colocar la imagen sobre un fondo negro) y "portada" (para cubrir toda la diapositiva).Las diapositivas están preparadas para un tamaño de 1000 x 600 píxeles. En el modo de presentación, se escalan para ajustarse al tamaño de la pantalla.
Una diapositiva HTML simple ( slides/slide-name.inc.html ) con viñetas tiene el siguiente aspecto:
< div class =" text left w600 " >
< h1 > Slide title </ h1 >
< ul >
< li > This is bullet 1 </ li >
< li > This is bullet 2 </ li >
< li > This is bullet 3 </ li >
</ ul >
</ div >
< img class =" right w400 " src =" slides/jigsaw.jpg " >La diapositiva muestra una imagen (etiqueta img) en el lado derecho (400 píxeles) y utiliza los 600 píxeles restantes a la izquierda para el título de la diapositiva (etiqueta h1) y las viñetas (etiqueta ul, etiqueta ol, etiqueta li).
La plantilla contiene ejemplos para colocar texto e imágenes e insertar tablas.
El formato SVG ( slides/slide-name.inc.svg ) es adecuado para diapositivas con gráficos vectoriales, como diagramas o esquemas. Estas diapositivas se pueden dibujar con Inkscape o cualquier otro software capaz de guardar o exportar archivos SVG.
El documento SVG (página) debe tener un tamaño de 1000 x 600 píxeles ( width="1000" height="600" ). El código SVG se limpia durante la importación. En particular, se eliminan la información específica de Inkscape y los ID predeterminados (por ejemplo, rect1098 ).
Para reconstruir la presentación ( index.html ), abra una ventana de terminal (línea de comando) y ejecute
./deploy/run
El script sigue buscando cambios y reconstruye index.html cuando es necesario. Para salir, presione Ctrl-C en la ventana de terminal.
El script de implementación comprueba crudamente su código HTML. En particular, advierte si las etiquetas no están cerradas correctamente.
Para iniciar la presentación, presione F11 para habilitar la pantalla completa y p para cambiar al modo de presentación . Utilice las teclas de flecha izquierda/derecha (o Page Up / Page Down ) en el teclado para pasar a la diapositiva anterior/siguiente. En dispositivos móviles, puede deslizar el dedo hacia la izquierda o hacia la derecha.
El botón de menú en la esquina superior derecha (tres franjas) abre el índice de diapositivas. Al hacer clic en cualquier diapositiva se cambia a esa diapositiva.
Si activa otra ventana (o iframe dentro de las diapositivas) durante la presentación, el botón de menú se vuelve rojo para indicar que las teclas de flecha (para pasar a la siguiente diapositiva) no funcionan. Al hacer clic en ese botón rojo, la presentación se enfocará nuevamente y las teclas de flecha funcionarán.
Muchos navegadores permiten imprimir las diapositivas. Cada diapositiva cabe en una página A4 horizontal.
Cuando conecta un proyector como pantalla externa, puede mostrar la presentación en ambas pantallas.
Para eso, abra la misma presentación en dos ventanas separadas del navegador (del mismo navegador). Coloque una ventana en la pantalla principal y la otra ventana en la pantalla externa (en modo de pantalla completa). Las dos ventanas siempre mostrarán la misma diapositiva.
Tenga en cuenta que es posible que el contenido interactivo no siempre esté sincronizado.
Una presentación que se ejecuta en una computadora portátil puede controlarse de forma remota mediante un teléfono móvil. Esto requiere una conexión a Internet, ya que los mensajes de control se envían a través de un servidor (https://viereck.ch/remote/).
Para configurar esto:
Los videos se insertan usando la etiqueta de video :
< video controls width =" 640 " >
< source src =" slides/video.mp4 " type =" video/mp4 " >
< a href =" slides/video.mp4 " > Play video with external player </ a >
</ video >Los navegadores web admiten una variedad de formatos de video. Casi todos los navegadores web admiten MP4, o el formato de vídeo MPEG-4/H.264. Los navegadores más populares también reproducen archivos WebM (video/webm) u Ogg/Theora (video/ogg).
De manera similar, los archivos de audio se insertan utilizando la etiqueta de audio .
Simplemente se puede crear una diapositiva con un vídeo en pantalla completa a partir del índice de diapositivas:
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ; El índice de diapositivas puede estructurarse mediante topic y subTopic :
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
topic ( 'Topic 1' ) ;
subTopic ( 'Subtopic 1' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
subTopic ( 'Subtopic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
topic ( 'Topic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >Los temas y subtemas solo aparecen en el índice de diapositivas. No tienen ningún efecto en las diapositivas ni en el flujo de la presentación.
Los archivos JavaScript denominados slides/slide-name.inc.js se insertan automáticamente con su respectiva diapositiva. JavaScript permite crear diapositivas avanzadas con simulaciones, animaciones, elementos interactivos, etc.
Un guión de diapositiva simple puede tener el siguiente aspecto:
const counter = document . getElementById ( 'fancySlideCounter' ) ;
let count = 0 ;
slide . onSlideAppears = function ( ) {
count += 1 ;
counter . textContent = 'This slide has appeared ' + count + ' times so far.' ;
} ;
slide . onSlideDisappears = function ( ) {
// ...
} ; El código se ejecuta cuando se carga la presentación. slide es una referencia a la diapositiva correspondiente, un elemento <div> . Cuando la diapositiva aparece en la pantalla, se llama a la función onSlideAppears . Por el contrario, se llama onSlideDisappears cuando la diapositiva desaparece. Es una buena práctica ejecutar animaciones sólo cuando la diapositiva esté visible. Tenga en cuenta que es posible que se vean varias diapositivas al mismo tiempo.
Para evitar conflictos entre nombres de variables y funciones, el código JavaScript de la diapositiva se coloca en una función anónima. Una diapositiva generada tiene la siguiente estructura:
< div class =" slide " >
<!-- The slide's HTML or SVG content -->
< script >
( function ( ) {
const slide = document . currentScript . parentElement ;
// The slide's JavaScript code
} ) ( ) ;
</ script >
</ div > Las diapositivas aún pueden comunicarse entre sí a través del objeto window :
// In slide A
let fancyState = ... ;
window . getFancyState = function ( ) {
return fancyState ;
} ;
// In slide B
const state = window . getFancyState ( ) ;
... Los ID de los elementos deben ser únicos en toda la página HTML. Por lo tanto, las diapositivas deben anteponerles un nombre de diapositiva único ( fancySlide en el ejemplo anterior).
Las diapositivas interactivas pueden sincronizar su estado con otras instancias mediante control remoto (ver arriba). Tenga en cuenta que esto está destinado únicamente a pequeñas cantidades de datos, como unos pocos números, una identificación de elemento o un texto breve.
El siguiente ejemplo utiliza sendState y un detector de estado para sincronizar el contenido de una entrada de texto:
const input = document . getElementById ( 'fancySlideInput' ) ;
slide . onSlideAppears = function ( ) {
remote . addStateListener ( onStateChanged ) ;
} ;
slide . onSlideDisappears = function ( ) {
remote . removeStateListener ( onStateChanged ) ;
} ;
// Receive a state update
function onStateChanged ( state ) {
if ( ! state . fancySlide ) return ;
input . value = state . fancySlideText ;
}
// Send a state update when the text changes
input . oninput = function ( ) {
remote . sendState ( 'fancySlideText' , input . value ) ;
} ; 
