Inicio > Proyectos > Presentaciones s5

Presentaciones S5


Descripción · Trabajando con S5 · Temas para S5 · Extensiones a S5 · Notas

Descripción

S5 es un sistema para la creación de presentaciones basado en estándares web y pensado para verse con un navegador web.

Está creado originalmente por Eric A. Meyer y es de dominio público.

Aquí tenéis una presentación en formato S5 explicativa del propio sistema S5, hecha por Eric A. Meyer, el creador de S5 y traducida por mí a castellano.

Presentación S5
Presentación S5: Una Introducción · Modo Presentación (250 KB).


Ejemplo de presentacion S5

Ventajas

Una de las cosas buenas del sistema S5 es que, al estar basado en estándares, cualquier usuario, gracias a un navegador web, puede ver facilmente las presentaciones hechas con este sistema.

Otra de las grandes ventajas de S5 es que permite crear presentaciones accesibles, de modo que pueden ser usadas por distintos usuarios y distintos sistemas de navegación (navegadores de texto, de voz, dispositivos móviles, etc.)

S5 permite añadir datos y notas que complementen la información presentada en cada diapositiva, pero que sólo serán visibles en la versión impresa o sin estilos de cada presentación.

Asímismo, el formato de etiquetado HTML de S5 es sencillo y muy fácil de aprender. Siendo muy sencillo de extender o crear temas para S5.

Modo presentación
Modo web e impresión

Presenta un sistema de navegación integrado que permite avanzar y retroceder por las diapositivas de manera muy sencilla y cómoda, bien con el ratón, bien con atajos de teclado.

Controles integrados en las presentaciones S5

Inconvenientes

Actualmente el sistema S5 está en desarrollo, así que puede que no se vea exactamente igual en todos los navegadores.

Uno de los grandes inconvenientes que yo le veo a S5 es que no funciona muy bien a través de web para presentaciones de tamaño grande (con más de 50 diapositivas). El cambio entre una diapositiva será lento y consumirá bastantes recursos de nuestro procesador.


Volver al inicio de este documento

Trabajando con S5

Descargar la plantilla base

Trabajar con S5 es muy sencillo, basta con descargar el archivo base y editar el html y la hoja de estilos pertinente para empezar a crear nuestras propias presentaciones.

Aquí os dejo el archivo base S5 de Eric Meyer, traducido también por mí.

Archivo 7zip
s5-base.7z ver.1.1 (18,6 KB).


Está en formato 7zip.

Si usas linux, en tu distribución seguramente estén los paquetes de 7zip, sino, puedes descargar 7zip para linux en esta web.

Customizando el aspecto de la presentación

Para cambiar el aspecto gráfico de la presentación, simplemente edita el archivo PRETTY.CSS que encontrarás en la carpeta /ui/default una vez que descomprimas s5-base.

Modifica colores, fuentes, tamaños, añade fondos y todo lo que desees hasta conseguir la apariencia deseada.

Insertando contenido en la presentación

Una vez hemos configurado la apariencia estética de la presentación vamos a darle contenido.

Para ello, edita el archivo index.html que encontrarás una vez que hayas descomprimido s5-base con cualquier editor de texto o editor web.

Ten en cuenta que deberás usar en todo momento la codificación de caracteres UTF-8, para evitar así problemas con tíldes, eñes y otros símbolos.

Lo primero que debes hacer es rellenar los datos que aparecen indicados entre llaves [].

Así por ejemplo sustituiremos la línea:

<meta name="author" content="[Nombre del autor de la presentación aquí]" />

por ...

<meta name="author" content="Pepito Grillo" />

Llegaremos así hasta la sección destinada a los datos de cada diapositiva. Lo que haremos será copiar ya pegar el código de la diapositiva base y modificarlo a nuestro gusto.

Aquí tenemos el código de la diapositiva base:

		<div class="slide">
			<h1>[Título de la diapositiva]</h1>
		
			<ul>
				<li>[Punto uno]</li>
				<li>[Punto dos]</li>
				<li>[Punto tres]</li>
				<li>[Punto cuatro]</li>
				<li>[Punto cinco]</li>
			</ul>
		
			<div class="handout">
			
				[Añade aquí cualquier nota o información que desees mostrar en la versión impresa, pero no en la versión en pantalla]
			
			</div>
		
		</div>
		<!--fin slide-->

Lo copiamos, lo pegamos y lo modificamos, por ejemplo así:

		<div class="slide">
			<h1>La hora chanante</h1>
		
			<ul>
				<li>Supernoño</li>
				<li>El Gañan</li>
				<li>Testimonio</li>
				<li>Retrospecter</li>
				<li>Bocaseca man</li>
			</ul>
		
			<div class="handout">
			
				Más información sobre La hora Chanante en su web: http://www.paramountcomedy.es/pc.es/lahorachanante
			
			</div>
		
		</div>
		<!--fin slide-->

Por descontado que como estamos trabajando con XHTML, podemos añadirle imágenes, enlaces, párrafos, y cualquier otro contenido factible.

¡Eso sí!, ten mucho cuidado con el tamaño de las imágenes, si son muy grandes se verán cortadas y se saldrán de los márgenes de la pantalla.

Del mismo modo has de tener cuidado con la longitud y cantidad de texto a introducir en cada diapositiva pues puede salirse de la pantalla si es excesivo.


Volver al inicio de este documento

Temas para S5

Aquí os dejo unos cuantos temas para S5 creados por mí, sólo tenéis que descargarlos y proceder a su uso tal y como os he explicado en la sección anterior.

Los temas creados por mí llevan algunas modificaciones expresas que he diseñado para permitir más variedad de estilos en la presentación de cada diapositiva, en la siguiente sección podréis encontrar una referencia de estos añadidos y como usarlos.

Executive

previsualizacion del tema S5 Executive
7zip
Descargar tema EXECUTIVE comprimido en formato 7zip
s5-executive.7z · (139,7 KB)

Gorilla

previsualizacion del tema S5 Gorilla
7zip
Descargar tema GORILLA comprimido en formato 7zip
s5-gorilla.7z · (60,4 KB)

Mandarina

previsualizacion del tema S5 Mandarina
7zip
Descargar tema MANDARINA comprimido en formato 7zip
s5-mandarina.7z · (74,2 KB)

Quality [Actualizado]

previsualizacion del tema S5 Quality
7zip
Descargar tema QUALITY comprimido en formato 7zip
s5-quality.7z · (61,7 KB)

Tango

previsualizacion del tema S5 Tango
7zip
Descargar tema TANGO comprimido en formato 7zip
s5-tango.7z · (100,2 KB)

Tango DevWeb

previsualizacion del tema S5 Tango-DevWeb
7zip
Descargar tema TANGO comprimido en formato 7zip
s5-tango-devweb.7z · (373,2 KB)

Ultraviolet

previsualizacion del tema S5 Ultraviolet
7zip
Descargar tema ULTRAVIOLET comprimido en formato 7zip
s5-ultraviolet.7z · (44,1 KB)

Volver al inicio de este documento

Extensiones a S5

Para darle un poco más de viveza a las presentaciones, he añadido algunos estilos nuevos.

Estos estilos vienen por defecto en mis los temas, así que sólo tendréis que aprender a usarlos tal y como os indico a continuación:

first-pic

Efecto:
Coloca una imagen en la parte media derecha.
Dónde usarlo:
Está pensado para añadirle una imagen a la primera página.
Cómo usarlo:
Añade una imagen al primer "slide" y aplícale el class="first-pic".
Notas:
Obviamente, la imagen no debe ser muy grande, pues se saldrá de los márgenes o se montará con el texto.

align-center

Efecto:
Justificación centrada para bloques de texto e imágenes.
Dónde usarlo:
En cualquier diapositiva ("slyde"), cuando quieras que el texto aparezca con justificación centrada.
Cómo usarlo:
Aplica un class="align-center" al párrafo que contenga el texto.
Notas:
No abuséis de este efecto.

left-column y right-column

Efecto:
Divide la diapositiva en dos bloques verticales.
Dónde usarlo:
En diapositivas donde nos interese tener dos columnas para, por ejemplo, mostrar texto en una de ellas y una imagen en la otra.
Cómo usarlo:
Dentro de la diapositiva, bajo el título, crea una capa "div" y aplícale la clase align-left y debajo de esta crea otra capa a la que le debes aplicar la clase align-right. Introduce el contenido pertinente en cada capa (columna).
Notas:
No abuséis de este efecto, y cuidado con el tamaño de las imágenes y los textos.

fullscreen

Efecto:
Elimina las barras de navegación y deja el fondo por defecto a pantalla completa. *(ver notas)
Dónde usarlo:
En diapositivas donde queramos llamar mucho la atención.
Cómo usarlo:
Añade "fullscreen" a la diapositiva en la línea <div class="slide , fullscreen">.
Notas:
No funciona en todos los navegadores. Usadlo sólo en muy contadas ocasiones.

rotulo

Efecto:
Aumenta considerablemente el texto y lo centra.
Dónde usarlo:
Para palabras cortas que deseamos "llenen" toda la diapositiva.
Cómo usarlo:
Añade class="rotulo" al párrafo que contenga el texto que quieres resaltar.
Notas:
Sólo util para palabras cortas.

Volver al inicio de este documento

Extensiones a S5

03-01-2007 · Añadidas extensiones y mejoras de impresión para S5 Versión 1.1
25-12-2006 · Extensiones para S5 Versión 1.1


Volver al inicio de este documento

[cc] jEsuSdA 8)
Consulta la sección Información para saber a cerca de la política de distribución del contenido de esta web.