Presentaciones basadas en Estándares Web
S5, Presentacular y mejoras introducidas
Rafael Luque
Orange Soft
¿Qué es S5?
- S5 es un sistema sencillo para la realización de presentaciones basadas en estándares web (Simple Standards-based Slide Show System) creado por Eric Meyer.
- Permite crear presentaciones similares a las generadas con PowerPoint u OpenOffice, pero basadas en un documento XHTML.
- La apariencia de la presentación se controla mediante hojas de estilo CSS.
- Una pequeña cantidad de código JavaScript controla los aspectos dinámicos de la presentación (navegación, eventos de teclado y ratón, escalado, etc.)
Historia del proyecto
- Opera 4 introdujo Opera Show, una característica basada en hojas de estilo para proyección.
- Opera Show permite convertir un documento XHTML en una presentación de diapositivas.
- La idea era buena, pero dependiente del navegador.
- Tantek Çelik crea una técnica basada en JavaScript que traslada la idea de Opera Show a múltiples navegadores.
- Eric Meyer desarrolla S5 basándose en las ideas de Tantek y las aportaciones de numerosos contribuidores.
Situación actual
- Cada diapositiva consiste en un elemento con una clase, siendo los IDs generados automáticamente mediante JavaScript.
- El menú de navegación también es generado automáticamente.
- Compatible con el formato Opera Show 1.0 (OSF 1.0).
- También soporta presentaciones basadas en el microformato XOXO.
- En julio de 2006 se anunció la creación del sitio S5project.org dedicado al desarrollo de esta herramienta por parte de la comunidad.
Características de S5
- Autoescalado de texto: S5 escala el texto de la presentación para ajustarlo al tamaño de la ventana del navegador.
- Presentación incremental: Usando la clase
class="incremental"en una lista, se consigue que sus elementos se presenten de uno en uno (como en este caso). - Indicador de progreso: En cada diapositiva se incluye automáticamente un texto (X/Y) que indica el número de la diapositiva actual y el número total de diapositivas de la presentación.
- Formatos OSF y XOXO.
Características de S5 (ii)
- Bookmarks para diapositivas: Cada diapositiva puede enlazarse mediante el identificador
#slideN, donde N representa el número de diapositiva en la presentación. Por ejemplo, si la presentación se encuentra enhttp://dominio.org/intro.html, la diapositiva 4 se referencia mediante la URLhttp://dominio.org/intro.html#slide4. -
Control mediante teclado:
- Diapositiva siguiente: Espacio, Retorno, Intro, Flecha derecha, Flecha abajo, Avance de página o haciendo click con el botón izquierdo del ratón.
- Diapositiva anterior: Flecha izquierda, Flecha arriba, Retroceso de página.
- Primera diapositiva: Inicio.
- Última diapositiva: Fin.
Características de S5 (iii)
-
Control mediante teclado:
- Salto directo a una diapositiva: Teclear el número de diapositiva y despues pulsar Retorno o Intro.
- Avanzar n diapositivas: Teclear el número de diapositivas a saltar y después cualquier tecla de avance, excepto Retorno e Intro.
- Retroceder n diapositivas: Teclear el número de diapositivas a saltar y después cualquier tecla de retroceso.
- Conmutar entre el modo presentación y el modo esquema: t.
- Mostrar/Ocultar los controles de navegación: c o pasar el ratón por la zona inferior derecha.
- Notas adjuntas a diapositivas: Es posible incorporar notas a cada diapositiva que no se presentarán en la proyección, pero que el presentador puede visualizar en su pantalla (tecla n) junto con otra información útil (tiempo transcurrido de presentación, tiempo por diapositiva, etc.)
Referencia de S5
- Estructura básica de una presentación en S5:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div class="layout"> </div> <div class="presentation"> </div> </body> </html>
Referencia de S5 (ii)
- Metadatos:
<head> <title>[slide show title]</title> <meta name="version" content="S5 1.1" /> <meta name="generator" content="[generating program]" /> <meta name="presdate" content="[presentation date]" /> <meta name="author" content="[author's name]" /> <meta name="company" content="[author's employer]" /> <meta http-equiv="Content-Type" content="[content-type]" /> <meta name="defaultView" content="slideshow|outline" /> <meta name="controlVis" content="visible|hidden" /> <link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" /> <link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" /> <link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" /> <link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" /> <script src="ui/default/slides.js" type="text/javascript"></script> </head>
Referencia de S5 (iii)
- Layout:
<div class="layout"> <div id="controls"></div> <div id="currentSlide"></div> <div id="header">[any header content]</div> <div id="footer">[any footer content]</div> <div class="topleft">[top left layout bit]</div> <div class="topright">[top right layout bit]</div> <div class="bottomleft">[bottom left layout bit]</div> <div class="bottomright">[bottom right layout bit]</div> </div>
Referencia de S5 (iv)
- Diapositivas:
<div class="presentation"> <div class="slide"> <h1>[slide title]</h1> <div class="slidecontent"> [slide content] </div> <div class="handout"> [extra content not displayed in slide show] </div> </div> </div>
Referencia de S5 (v)
- Diapositivas (formato XOXO):
<ol class="presentation xoxo"> <li class="slide"> <h1>[slide title]</h1> <div class="slidecontent"> [slide content] </div> <div class="handout"> [extra content not displayed in slide show] </div> </li> </ol>
- Referencia completa de S5 1.1 (vesión XOXO).
Estructura interna de S5
Añadiendo efectos con Presentacular
Presentacular
- Presentacular consiste en una librería JavaScript desarrollada por Juan Cavorite para añadir efectos visuales de script.aculo.us a presentaciones S5.
- No es necesario manejar directamente el código JavaScript. Los efectos se marcan mediante clases CSS.
- Distribuida bajo la licencia GPL.
- Para usar los efectos, basta incluir la librería Presentacular y sus dependencias (Prototype y script.aculo.us) en la presentación:
<script src="prototype/prototype.js" type="text/javascript"></script> <script src="scriptaculous/scriptaculous.js" type="text/javascript"></script> <script src="presentacular.js" type="text/javascript"></script>
Añadiendo efectos
-
Se añade una clase CSS con el nombre del efecto.
<p class="pulsate">Se añade una clase con el nombre del efecto.</p> -
La duración del efecto se puede controlar mediante un argumento
<p class="pulsate_4">La duración del efecto se puede controlar mediante un argumento</p>
Efectos disponibles
Efectos disponibles (ii)
Mejoras introducidas: Soporte a temas
Creación de temas en S5
- Las presentaciones en S5 están basadas en CSS, con lo que en principio cualquier persona que conozca las hojas de estilo puede crear nuevos temas.
- Sin embargo, existen algunas carencias:
- No existe una clara separación entre las hojas de estilo centrales de la herramienta y las relativas a la apariencia (todos los archivos se sitúan en el mismo directorio).
- La instalación de un nuevo tema consiste en sobreescribir manualmente algunos de los archivos originales de S5.
- No existe soporte para múltiples temas.
- Por esta razón hemos efectuado algunos cambios en el código base de S5 para mejorar el soporte a los temas, implementados como hojas de estilo alternativas.
- Al resultado lo denominamos S6 (Simple Standards-based Skinnable Slide Show System).
Cambios en S6
- Nueva estructura de directorios:
ui/core: contiene los archivos que controlan el funcionamiento interno de la herramienta (código JavaScript y CSS centrales) que no deben ser modificados por los autores de temas.ui/themes: contiene los temas instalados.- El tema por defecto instalado con S5 se ha factorizado y ahora se localiza en
ui/themes/default.
- Soporte a múltiples temas: Además del tema preferido, una presentación puede especificar un conjunto de temas alternativos entre los que el usuario puede conmutar.
Cambios en S6 (ii)
- Nuevos parámetros de configuración permiten declarar los temas a emplear en la presentación:
<meta name="preferredTheme" content="orangesoft" /> <meta name="preferredThemeTitle" content="Orange Soft's theme" /> <meta name="alternateTheme" content="default" /> <meta name="preferredThemeTitle" content="Default S5 theme" /> - La herramienta utiliza estos parámetros para generar automáticamente los elementos
linkque vinculan la presentación con las hojas de estilo de los temas. En nuestro ejemplo:<link rel="stylesheet" title="Orange Soft's theme" href="ui/themes/orangesoft/hook.css" type="text/css" media="screen" /> <link rel="alternate stylesheet" title="Default S5 theme" href="ui/themes/default/hook.css" type="text/css" media="screen" />
Cambios en S6 (iii)
- Generación automática de un mecanismo de conmutación entre temas que permite al usuario cambiar el tema utilizado en "tiempo de presentación"
- Desgraciadamente sólo ciertos navegadores (Mozilla y Firefox) permiten al usuario conmutar entre las hojas de estilo alternativas de un documento.
- S6 genera automáticamente un mecanismo situado en la esquina inferior derecha, que permite al usuario conmutar entre los temas de la presentación.
- La visibilidad de este mecanismo se controla del mismo modo que la de los controles de navegación.
Lista de tareas
- Testear los cambios introducidos en S6 en diferentes navegadores.
- Tratar de efectuar los cambios sobre el código base de S5project.org que no coincide con el original de Meyer.