Crear una presentacion S5
En un anterior post había comentado sobre las presentaciones S5, ahora voy a explicar como hacer una. Para que nos sirva de ayuda podemos bajar una plantilla básica desde el blog del autor. Al descomprimirlo tenemos un archivo s5-blank.html y una carpeta ui, el archivo tiene la estructura básica de S5 y dentro de la carpeta se encuentra las CSS y el script javaScript, el cual se encarga de mostrar las diapositivas. Es importante mantener todo dentro del directorio que lo descomprimamos, ya que si cambiamos de lugar tanto s5-blank.html o ui se invalidarán las referencias. Si hacemos un cambio, habrá que cambiar la sección de link dentro del encabezado.
La estructura básica está formada por así decirlo por el encabezado y el cuerpo. El encabezado tiene el siguiente aspecto
[html]
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
….
… ….
[/html]
Y el cuerpo tiene este aspecto:
[html]
…
[/html]
El encabezado se encuentra entre las etiquetas <head></head> y dentro de él tenemos:
- Título de la presentación
- Metadatos
- Parámetros de configuración
- Links a las CSS
- Link al script JavaScripts
El título de la presentación debemos colocarlo entre las etiquetas <title></title>, luego en las etiquetas de metadatos <meta … />, van datos relacionados con la presentación, por ejemplo el autor, la fecha, la compañia, etc. Por ejemplo cambiemos el título de la presentación:
[html][/html]
Y cambiemos el autor y compañia
[html]
[/html]
Eso es suficiente modificar en el encabezado, vayamos al cuerpo. El cuerpo se podría dividir en dos partes:
- Diseño
- Presentación
El diseño se encuentra entre las etiquetas <div class=”layout”></div>, en él encontramos unas etiquetas que no hay que editar, sólo tenemos que cambiar dos etiquetas, las cuales son el título de la presentación y la fecha de la misma. Estas se mostrarán en la parte inferior izquierda de la presentación (teniendo en cuenta el estilo con que viene la presentación)
[html]
[/html]
La presentación se encuentra entre <div class=”presentation”></div>, dentro de él encontramos varías etiquetas <div class=”slide></div>, éstas son las diapositivas. Coloquemos una diapositiva a la presentación.
[html]
[/html]
Con esto sería suficiente para tener una una diapositiva. Si ahora abren la diapositiva con su browser, notarán que contiene signos extraños en los lugares donde hay acentos, esto se soluciona fácilmente. Deben colocar la siguiente línea en el encabezado al principio de la sección de metadatos
[html]
[/html]
Con esto sabe el browser con cuál codificación mostrar los caracteres. Aquí hay una muestra de cómo se vería
Al final de las etiquetas de presentación encontramos
[html]
[/html]
El contenido que agreguemos dentro de éstas etiquetas, no se mostrará en una diapositiva, pero sí saldrá cuando imprimamos la presentación. Por ejemplo aquí se podría colocar información relacionada con la muestra de diapositivas.
Para finalizar, vamos agregar una diapositiva con efecto de muestra incremental, esto es que cada vez que hagamos click en la pantalla aparecerá un nuevo elemento. La diapositiva la agregaremos a continuación de la anterior, siempre dentro de las etiquetas <div class=”presentation”></div>; tendrá una lista de elementos, los cuales aparecerán con cada click
[html]
[/html]
Bueno, se puede hacer mucha cosas más, ya que es una página HTML, por ejemplo, agregar imágenes, link, efectos, animaciones, etc.
Tags: CSS, Javascript, presentacion, S5, XHTML