acc_slide ha sido creado teniendo como objetivo la separación absoluta entre el contenido y el comportamiento, evitando cualquier consideración acerca de este al crear y marcar la información que se quiera mostrar.
Entre las características que el sistema de presentaciones acc_slide posee se pueden destacar:
title en el enlace, el contenido de este se mostrará al pié de la ventana. Además, el destino del enlace puede ser una URL o una imagen.Los dos archivos que hay que enlazar en el elemento head del documento XHTML son acc_slide_conf.js y acc_slide.js.
<script type="text/javascript" src="ruta/js/acc_slide_conf.js"></script> <script type="text/javascript" src="ruta/js/acc_slide.js"></script>
El script se encarga del resto al cargar automáticamente los demás archivos necesarios (las hojas de estilo).
Los estilos personales que se deseen aplicar a la presentación se incluirán en los archivos acc_slide_personal.css y acc_slide_print_personal.css (hoja de estilos personal para impresión), y que se encuentran en el directorio css. No es necesario enlazarlos desde el documento.
Respecto a las imágenes, se pueden modificar, pero se debería respetar el nombre establecido para evitar efectos no deseados.
El marcado a emplear en el documento es muy simple. Se basa en la idea de estructurar el contenido mediante el uso de encabezados. La diferencia con otros sistemas de diapositivas en formato XHTML es que no es necesario incluir marcado adicional, ni elementos extra (tales como elementos genéricos div) ni identificadores o clases, para diferenciar las diapositivas.
El marcado a emplear en el documento es muy simple y se basa en la idea de estructurar el contenido mediante el uso de marcado semántico y estructural. No es requiere marcado adicional, ni identificadores o clases, para diferenciar las diapositivas.
Se recomienda observar el marcado utilizado de esta presentación para apreciar su sencillez.
Se podría emplear marcado adicional si se desean añadir y controlar determinados estilos. Si se incluyen nuevos elementos div, estos deberán incluir la clase "acc_slide" para que no los anule el script.
.. y siempre importante: Los contenidos deben estar marcados correctamente desde el punto de vista estructural y semántico (uso de párrafos y listas, encabezados, etc). No es que esto sea imprescindible para el sistema, pero... lo es para hacer las cosas bien.
El marcado que se genera con el script tiene dos funciones básicas.
Se crean contenedores genéricos (div) con la clase "page" que engloban las diapositivas de dos en dos. Estas, a su vez son otro contenedor genérico con la clase "slide". Cada diapositiva posee en su interior otros dos, uno para la cabecera y otro para el contenido (clases "head" y "content" respectivamente):
<div class="page">
<div class="slide">
<div class="head"> ... </div>
<div class="content"> ... </div>
</div>
<div class="slide">
<div class="head"> ... </div>
<div class="content"> ... </div>
</div>
El boliche que se desplaza verticalmente por el lateral de la diapositiva es un contenedor (div) con el identificador "new_scroll".
Las estructuras generadas para las cabeceras y para el pié se muestran en las siguientes diapositivas, así como el marcado generado para aplicar ciertos estilos con CSS tales como podrían ser el Sliding Doors.
<div class="head"> <h2>Titulo de sección</h2> </div>
<div class="head">
<h3>
<span class="subtitulo">Título diapositiva</span>
</h3>
<span class="seccion">Título sección</span>
</div>
<div class="head"> <h2>Título diapositiva</h2> </div>
El script genera el siguiente código para crear el pié (el pié es común y único para toda la presentación), con lo que este se añade al final del documento.
<div id="foot">
<ul id="navegacion">
<li id="li_indice">
<span><a href="#" id="enl_indice">indice</a></span>
</li>
<li id="li_anterior">
<span><a href="#" id="enl_anterior">
<abbr title="Anterior diapositiva"><<</abbr>
</a></span>
</li>
<li id="li_posterior">
<span><a href="#" id="enl_posterior">
<abbr title="Siguiente diapositiva">>></abbr>
</a></span>
</li>
<li id="actual">
<span id="span_actual">n / total</span>
</li>
</ul>
</div>
Como se mencionó anteriormente, se genera marcado para aplicar ciertos estilos con CSS tales como podrían ser el Sliding Doors.
Como primer descendiente.
<div class="c_top_body"> <div class="c_left"></div> <div class="c_right"></div> </div>
...y como último descendiente.
<div class="c_bottom_body"> <div class="c_left"></div> <div class="c_right"></div> </div>
Esta misma estructura se genera en:
Adicionalmente se crea un sistema que además de servir de enlace para ir a una diapositiva en concreto, orienta de la posición de la diapositiva actual en el conjunto.
<ul id="nav_graf">
<li>
<a class="cre" href="#">n-1</a>
<img class="navtoplink" id="newlinkimg_n-2" alt="n-1" src="img/visited.gif" />
</li>
<li>
<a class="cre" href="#">n</a>
<img class="navtoplink current" id="newlinkimg_n-1" alt="n" src="img/current.gif" />
</li>
<li>
<a class="cre" href="#">n+1</a>
<img class="navtoplink" id="newlinkimg_n+1" alt="n" src="img/no_visited.gif" />
</li>
</ul>
n es la diapositiva actual.
La configuración del sistema de diapositivas es realmente simple. El comportamiento por defecto está configurado para dividir el contenido en secciones. El archivo acc_slide_conf.js incluye a su comienzo la variable que lo controla, con lo que si no se desea este comportamiento, bastará con cambiar su valor a false (por defecto es true).
var secciones = true; // "false" para no dividir en secciones
Si se mantiene su valor por defecto y en el documento no hay presente ningún encabezado de nivel 3 (evidentemente sólo los habrá de nivel 1 y 2), el sistema sobreentiende que no hay secciones y obra como tal.
El idioma se obtiene directamente a partir del declarado en el documento. Por defecto incluye inglés y español, pudiendo añadir los que se deseen directamente en el script.
var textos = {
es : new Array('índice','cerrar','Introducción','Siguiente','Anterior','página'),
en : new Array('index','close','Intro','Next slide','Previous slide','page')
};
También se puede controlar la velocidad con la que el sistema autoplay reproduce la presentación. Por defecto, cuando está activo, el sistema tiene un retardo de 3 segundos entre un contenido y el siguiente.
var velocidad = 3;
El degradado empleado para ir mostrando los contenidos de cada diapositiva al avanzar se configura desde el archivo acc_slide_conf.js mediante la declaración de la serie de colores en un array.
var tonos = new Array('#FFF','#777','#444')
El primero será el color del texto cuando esté plenamente visible, pudiendo declarar un número ilimitado de colores.
También se puede recurrir a eliminar el degradado y hacer que los contenidos únicamente se muestren u oculten. Para ello bastará con dejar un único valor de color en el array.
var tonos = new Array('#FFF')
Es importante tener en cuenta que la serie de color declarada para el degradado no afecta ni a la primera diapositiva, ni a las de inicio de sección. Tampoco se ven afectados los encabezados de cada una de las diapositivas.
Se han implementado dos modos de avance del degradado. Uno de ellos (modo "de avance") hace que únicamente se manifieste hacia los contenidos que siguen al actualmente activo, quedando los anteriores plenamente visibles. El otro (modo "dual") añade el que los contenidos previos al actual degraden hasta el último tono (sin llegar a desaparecer), de tal forma que el actual sea el que destaca sobre los demás. Para determinar cual de los dos modos se desea utilizar, en el archivo de configuración se ha declarado la variable "dual".
var dual = false; // "modo dual" desactivado
Si se desea que algún elemento del contenido se muestre siempre sin verse afectado por el sistema de degradados, bastará con añadirle la clase "noincremental". Se plantean varias opciones para su uso:
<p class="noincremental">Contenido permanente.</p>
h3 en el caso de haber secciones o el h2 si no las hay). Ej.:
<h3 class="noincremental">Título de diapositiva.</h3>
body.
<body class="noincremental">
Para determinar los estilos a aplicar, se recomienda revisar el marcado generado por el script. Dicho marcado se ha ideado con el objetivo de dar cierta libertad a la imaginación y poder crear variados estilos. Por ejemplo, el script genera contenedores que engloban las diapositivas de dos en dos de cara a ofrecer posibilidades adicionales en la impresión de la presentación (se pueden tener impresas las diapositivas mostrándose dos por hoja).
De forma general:
current".first" y "last" para poder modificar sus estilos con respecto al resto.subtema".sec_" seguida del número de sección. Asímismo, los elementos de navegación también adquieren dicha clase. Con esto se podría controlar el aspecto de cada una de ellas.En el caso de utilizar el "degradado de avance", el script hace que los contenidos que hasta el momento se hayan mostrado incluyan la clase "show". Si en cambio, el degradado empleado es el "dual", el contenido que actualmente se muestra destacado poseerá la clase "item_actual". Esto es útil si se quieren asociar estilos específicos a dichos elementos (por ejemplo, si se utilizan imágenes de fondo como boliches en las listas).
Si además lo queremos hacer en caliente mediante el teclado (como se menciona en el apartado "Controlando los estilos") bastará con jugar con los selectores apropiados.
Se puede aumentar la personalización de los estilos de tal manera que se pueden aplicar estilos específicos en las diapositivas que se desee. Para ello basta con aplicar clases directamente sobre los encabezados que funcionan como títulos en estas. Así, por ejemplo, si tenemos estilos asociados a la clase "fondo_especial" y esta se la aplicamos al h3 de una diapositiva, automáticamente, dicha clase se aplicará sobre el contenedor de la diapositiva, con lo que todos sus contenidos serán descendientes.
El sistema se puede controlar tanto con el teclado como con el ratón. Los controles básicos son:
... y como controles adicionales
El sistema autoplay permite la reproducción automática de la presentación. En su manejo intervienen los siguientes controles:
Cualquier control que intervenga en la navegación detiene la reproducción automática.
Mediante el control de estilos en caliente se puede controlar el aspecto con el que se muestran las diapositivas.
body (por ejemplo, el número 7 añade/elimina la clase alt7).Con todo esto, y grácias a los selectores y a su especificidad, se podrán hacer cosas tales como eliminar el estilo general del sitio (aprovechando el identificador bio del elemento body) o modificar el color de fondo, tipografías, etc. El número de combinaciones que se pueden realizar es muy elevado (teniendo en cuenta que el número de clases disponibles que se pueden llegar a aplicar sobre el body son 8 y que se pueden combinar entre si, duplicando las posibilidades al poder quitar y poner el identificador, y teniendo presente que en el caso de tener definidas secciones, estas pueden tener estilos diferentes)...
...y todo ello se puede hacer "en caliente" (mientras se está ejecutando la presentación).
Algo tan sencillo como ocultar el pié gráfico de esta presentación se ha conseguido con:
.alt2 #navegacion,
.alt2 #nav_graf {
display: none
}
...de tal manera que al pulsar el número 2, como se puede comprobar, este desaparece.
La propuesta que planteamos desde aquí es crear un repositiorio público de estilos para el sistema de presentaciones acc_slide. Los estilos que deseeis compartir serán publicados, evidentemente, referenciando al autor. Podéis enviar vuestros temas a rumoroso@niquelao.net.