wPresenter
¿Qué es?Es una aplicación web que sirve para visualizar una presentación de diapositivas por medio de un navegador web, creado con Software Libre y respetando los estándares web establecidos por la W3C.
La aplicación está en su primera versión, por lo que puede ser posible que encuentres algún error en ella. De ser así, puedes reportarlo por medio de este mismo post.
¿Cómo se hizo?La aplicación está hecha con XHTML, CSS y jQuery. Para su desarrollo únicamente se utilizó como base el sistema operativo Ubuntu 11.04, el editor de textos por defecto; gedit y para probarlo Mozilla Firefox. Así que si en otro navegador encuentras cualquier diferencia, puedes reportarla.
¿Cómo navego por medio de la presentación?wPresenter está pensado para que su navegación sea de una manera sencilla para todos, por lo que sus métodos para pasar a la siguiente página, o retroceder son muy sencillos:
- Siguiente página: click principal, flecha derecha, letra M, barra espaciadora.
- Página anterior: click secundario, flecha izquierda, letra Z, tecla de borrar.
Creando mi propia presentaciónCrear una presentación es muy sencilla. Como podrás ver al descargar el archivo
ejemplo.php, sólo tienes que editar unas cuantas líneas de su código fuente para agregarle cuantas páginas quieras.
<!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" xml:lang="es" lang="es-es">
<head>
<title>[Título de la presentación]</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="es" />
<meta name="generator" content="wPresenter" />
<meta name="version" content="1.0" />
<!-- Detalles de la presentación -->
<meta name="author" content="[Autor de la presentación]" />
<meta name="description" content="[Descripción]" />
<meta name="date" content="[Fecha / Lugar de la presentación]" />
<!-- Archivos externos -->
<link rel="stylesheet" href="scripts/tema.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/wpresenter.js"></script>
</head>
<body>
<!-- Layout de presentación, NO EDITAR -->
<div id="wpresenter">
<div id="cabecera"></div>
<div id="contenido"></div>
<div id="pie">
<div id="detalles"></div>
<div id="paginas"></div>
</div>
</div>
<!-- Hojas de la presentación -->
<div id="presentacion" style="display:none">
<div class="hoja">
<h1>Diapositiva de prueba</h1>
<h2>Título de la diapositiva</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae ligula sagittis nisl suscipit ullamcorper non nec dui. Mauris pulvinar, ligula sit amet iaculis tempus, sem purus fermentum tortor, id pulvinar erat nisl quis risus. Nulla in lectus eget purus fermentum posuere.</p>
<ul>
<li>Item de lista</li>
<li>Item 2</li>
</ul>
</div>
</div>
</body>
</html>Cambiando los detalles de la presentaciónEs muy sencillo cambiar estos detalles, basta con editar la siguientes líneas para cambiar determinada información:
- Título de la presentación: Cambiar el contenido de <title>[Título de la presentación]</title> en la línea 5]
- Autor de la presentación: Modificar <meta name="author" content="[Autor de la presentación]" /> en la línea 13
- Descripción: Modificar <meta name="description" content="[Descripción]" /> en la línea 14
- Fecha / Lugar de la presentación: Modificar <meta name="date" content="[Fecha / Lugar de la presentación]" />, línea 15
Agregando diapositivas a la presentaciónSI encontraste "Cambiando los detalles de la presentación" sencillo; este lo será mucho más. En la línea 34 encontrarás el comentario
<!-- Hojas de la presentación -->, después verás un div con el identificador "
presentación". Pues bien, cada diapositiva la vas a agregar dentro de ese div, con el siguiente formato:
<div class="hoja">
<h1>[Título de la diapositiva]</h1>
<h2>[Título secundario de la diapositiva]</h2>
<p>[Texto de la diapositiva]</p>
<ul>
<li>Ítem de lista 1</li>
<li>Ítem de lista 2</li>
</ul>
</div>
EnlacesPágina web del proyecto:
proximamente.
Vista previa de wPresenter:
http://kevinvillalobos.com/wpresenter/Descarga la versión 1.0:
http://kevinvillalobos.com/wpresenter/wpresenter.rar
