acc_slide es un sistema de diapositivas realizado íntegramente sobre XHTML, empleando CSS para la presentación y javascript no intrusivo para el comportamiento. Estos tres elementos se utilizan de forma totalmente independiente, con lo que se consigue la separación absoluta entre ellos (separación de contenido, presentación y comportamiento).
Sus características principales son:
Para comenzar a utilizarlo únicamente hay que enlazar en el elemento head del documento XHTML los archivos acc_slide_conf.js y acc_slide.js. El siguiente código es el que sirve para ello:
<script type="text/javascript" src="ruta/js/acc_slide_conf.js"></script> <script type="text/javascript" src="ruta/js/acc_slide.js"></script>
Las dos hojas de estilo que se pueden editar para personalizar el aspecto de la presentación son:
acc_slide_personal.cssacc_slide_print_personal.css (hoja de estilo para la impresión)No es necesario enlazarlas en el documento, pues ya se encarga de ello el script.
El contenido de la presentación se hace en XHTML y no requiere más marcado que el necesario para incluir los contenidos (por cuestiones de accesibilidad y estándares, debería ser siempre marcado semántico y estructural). Si el marcado es correcto, el script reconocerá los contenidos que pertenecen a cada diapositiva y las creará de forma adecuada. Para ello seguirá las siguientes pautas:
Se recomienda observar el marcado utilizado en esta presentación para apreciar su sencillez.
Los parametros que se pueden configurar están incluidos en el archivo acc_slide_conf.js, y son los siguientes:
var tonos = new Array('#FFF','#333','#111')
Es el conjunto de colores que constituye el degradado que muestra los contenidos de cada diapositiva al avanzar. Se pueden declarar tantos como se desee, siendo el primero el color del texto cuando está plenamente visible.
var secciones = true;
Es la variable que permite establece si ha de haber secciones o no. Su valor por defecto es true.
var velocidad = 3;
Es la velocidad de reproducción automática del sistema autoplay. Se mide en segundos de retardo entre un contenido y el siguiente.
var textos = {
es : new Array('índice','cerrar','Introducción',
'Siguiente diapositiva','Anterior diapositiva','página'),
en : new Array('index','close','Intro',
'Next slide','Previous slide','page')
};
Son los diferentes textos empleados en la presentación. En este caso se incluyen los correspondientes a los idiomas español e inglés, pudiendo ampliarlo a todos los que se deseen. La presentación se adapta al idioma declarado en el documento.
var dual = false;
Es el modo de avance del degradado y permite destacar todo lo leido hasta el momento (valor por defecto) o únicamente el contenido actual. Esto se explica con más detalle en la diapositiva 11 (Tipos de degradado).
Finalmente, el sistema ofrece la posibilidad de incluir un contenido gráfico (svg, swf o imagen) que se presente a lo largo de todo el documento. Los tres valores siguientes son opcionales (se pueden dejar en blanco):
var ruta_object = '';
Es la ruta al archivo svg o flash que se desee incluir.
var ruta_img = '';
Es la ruta a la imagen que funcionaría como alternativa al anterior. Se podría incluir esta ruta sin necesidad de incluir ningún svg o flash, con lo que sería la imagen la que se mostrase a lo largo de toda la presentación.
var alternativa = '';
Este sería el texto alternativo a la imagen, funcionando también como atributo title de los anteriores.
Se han implementado dos maneras de avance del degradado:
Para determinar cual de las dos maneras se va a utilizar se ha declarado la variable "dual" en el archivo de configuración.
var dual = false;
Si además se incluye la clase "noincremental" en un elemento concreto, en el encabezado de diapositiva, de sección, o en el propio body, se anulará el degradado sobre el elemento, diapositiva, sección o presentación respectivamente.
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.
El aspecto que tenga la presentación se controla mediante CSS. Para ello se utilizan cuatro hojas de estilo, siendo dos de ellas las personalizables con los estilos que se le quiera aplicar a la presentación:
acc_slide_personal.css: para estilos en pantallaacc_slide_print_personal.css: para estilos de impresiónPara aplicar los estilos, es recomendable revisar el marcado generado por el script (mediante herramientas que permitan acceder al árbol DOM que este crea). El grado de personalización de la presentación es máximo, pudiendo aplicar estilos diferentes a cada sección.
El manejo de las diapositivas se puede hacer tanto con el teclado, como con cualquier otro dispositivo. Además, se han incluido enlaces útiles para la ejecución de las funciones principales. Los controles básicos son:
Además de los controles básicos ya mencionados, existe una serie de 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 (en tiempo de ejecución) se puede controlar el aspecto con el que se van a mostrar las diapositivas.
body (por ejemplo, el número 7 añade/elimina la clase alt7).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.