acc_slide is a slides system which uses XHTML for the content, CSS for the presentation and unobtrusive Javascript for behavior. These three elements work independently, with absolute separation among them (content, presentation and behavior).
Main features:
We just need to link the acc_slide_conf.js and acc_slide.js files to the head of the XHTML document to start using it. The needed code is:
<script type="text/javascript" src="ruta/js/acc_slide_conf.js"></script> <script type="text/javascript" src="ruta/js/acc_slide.js"></script>
We can also edit the style sheets to change the appearance of our presentation:
Script links them to the document, so that we do not need to do anything here.
Content is written in XHTML, without any extra tagging (according to accessibility and standards, it should always be semantic and structural tagging) If tagging is correct, script will recognize the content for each slide and they will be created correctly . It should follow these guidelines:
Note: An analysis of the tagging used in this presentation will show its simplicity.
Configuration params are included in the acc_slide_conf.js file:
var tonos = new Array ("#FFF", "#333", "#111")
This is the colour gradient shown when moving across the contents of each slide. We can include as many as we like. First one will be the final text colour.
var secciones = true;
This tagging establishes the existence of sections; "true" as default value
var velocidad = 3;
This one establishes the automatic speed reproduction of the Autoplay system. The number indicates the seconds delay between contents.
var textos = {
en : new Array('index','close','Intro',
'Next slide','Previous slide','page'),
es : new Array('índice','cerrar','Introducción',
'Siguiente diapositiva','Anterior diapositiva','página')
};
These are the texts used along the presentation, English and Spanish in this case, and extendable to all those desired. The presentation automatically changes to the language established in the document.
var dual = false;
Tagging for the gradient advancing mode. It allows skipping everything read till the moment (default value) or just the actual content. For extended information go to slide 11 (Gradient Styles)
Finally, the system offers the possibility of including a graphical content (svg, swf or image) that appears throughout the document. The three following values are optional (they can be left empty):
var ruta_object = '';
This is the route to the chosen svg or flash file.
var ruta_img = '';
This tagging shows the route to the alternative image to the previous option. This route could be used without the svg or flash file, so that this image would be shown throughout the presentation.
var alternativa = '';
This third tagging would be the alternative text to the image, also working as title of the previous cases.
Two ways of gradient advance have been implemented:
In order to establish one of them, it has been declared the "dual" variable in the configuration file.
var dual = false;
If the "non-incremental" class is also included in an element, in the head of the slide, of a section or body, the gradient will be cancelled on the element, slide, section or presentation respectively.
We must remember that the colours declared for the first gradient do not affect to the first slide, nor the section initial ones. Heads of the slides do not change either.
The aspect of the presentation is controlled by the CSS. Four style sheets are used for this: two of them can be edited to apply different styles to our presentation:
Tagging generated by the script needs to be checked, in order to apply the different styles (using the required tools to access to the DOM tree created). The presentation can be totally edited, so that different styles might be applied to each single section.
Slides can be controlled with the keyboard or any other devise. In addition, useful links to main functions have been included. The basic controls are:
In addition to the basic controls, there are several extra controls:
Autoplay system allows the automatic reproduction of the presentation. It works with the following controls:
Any control taking part in navigation will stop the automatic reproduction.
We can control the slides aspect (when running) using the on course styles control.
We raise here the idea of the creation of a shared styles repositorium for the acc_slide presentations system. Shared styles will be published, including the author's name or details.
Basic styles: