Niquelao » Archivo del weblog » acc_slide: Presentaciones con XHTML, CSS y javascript

acc_slide: Presentaciones con XHTML, CSS y javascript

15 de April, 2007 por Rumoroso

Por fin ha llegado el momento de publicarlo. Hacía tiempo que estaba en ello pero por un motivo u otro no pude hacerlo hasta ahora. Aquí está el nuevo sistema para realizar presentaciones con XHTML, CSS y javascript.

Supongo que alguno ya conocerá más de un sistema de los que habitualmente se utilizan, como por ejemplo el HTML Slidy del W3C o el S5 de Eric Meyer. Tras utilizarlos llegué a la conclusión de que, aunque buenos, había algo que quizás podría ser mejorable (según mi criterio, claro).

Como he dicho, ambos sistemas son buenos y válidos, pero en ambos se hace necesario utilizar marcado cuya única finalidad es la de servir para que el script lo utilice y aplique estilos sobre él. Si realmente se quiere tener algo eficaz, ¿por qué no hacer que el propio script genere el marcado que necesita de forma inteligente?

El desarrollo

Me puse manos a la obra con la siguiente premisa: Si tenemos un documento correctamente estructurado y marcado (con sus encabezados, párrafos, listas…), el script debe ser lo suficientemente inteligente como para organizar y generar la presentación, todo ello sin incluir ningún contenedor adicional, ni clases, ni id. Únicamente ha de ser la propia estructura del documento la que permita diferenciar lo que se tiene que incluir en cada diapositiva.

Tras pegarme con ello, aquí está el resultado. El acc_slide, o como Andrés y Maroto lo llaman, rumo_slide o slide_oso. En lugar de seguir escribiendo más acerca de ello, lo mejor es demostrar de lo que estoy hablando. He preparado dos presentaciones, ambas con la descripción del sistema y de su utilización. La diferencia entre ambas es el grado de resumen. No dudéis en echar un vistazo al marcado que he empleado para ver de lo que estoy hablando:

nota: aunque la forma de navegación por la presentación se trata en la misma, la forma básica de moverse por los contenidos se realiza con las flechas (arriba y abajo) del teclado.

Características básicas

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:

Únicamente requiere de una correcta y lógica estructuración del contenido mediante el uso de encabezados. No necesita de elementos adicionales más allá de los necesarios para el marcado semántico del contenido. El sistema reconstruye y adapta el árbol DOM, con lo que no impone la necesidad de un marcado concreto. Esto lo hace compatible con cualquier documento (X)HTML bien estructurado (incluso con los que incluyen el marcado empleado por otros sistemas de presentaciones). Esto lo hace totalmente versatil. Se podría utilizar sobre un documento web, sobre el marcado empleado en los otros sistemas de presentaciones, etc.
Respetuoso con los estándares y la accesibilidad.
Separación absoluta de contenido, presentación y comportamiento.
Fácil integración y fácil utilización. No requiere conocimientos específicos, y si se utiliza uno de los temas propuestos, no es necesario conocer CSS.
Permite crear secciones con grupos de diapositivas.
El aspecto gráfico ofrece gran versatilidad y se controla totalmente con CSS. Además se pueden crear varios estilos y jugar con la especificidad de selector para aplicarlos (y combinarlos) en caliente (mientras se ejecuta la presentación).
Sistema autoplay de reproducción automática.
Incorpora un sistema para abrir enlaces de forma integrada a la presentación. Si se incluye el atributo 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.
Cada diapositiva se asocia con un ancla de tal manera que se puede ir directamente a la que se desee. El ancla coincide con la posición de la diapositiva en la presentación.

Llegados a este punto, espero vuestro feedback. También estaba pensando crear un repositorio público de estilos para el sistema. Si os parece una buena idea y queréis participar con los vuestros, no lo dudéis. Podéis enviar vuestros temas a rumoroso@niquelao.net

Categoría: CSS, (X)HTML, Accesibilidad, Javascript

2 comentarios

Claudio 15 de October de 2007

Mis felicitaciones por tan importante emprendimiento. Junto a un amigo lo usaremos para una presentación. Una duda: pude descargar la versión reducida, pero no lo logré con la extendida. Me interesa más la extendida porque, aparentemente, usa el propio texto de la etiqueta H2 como elemento decorativo de las diapositivas, evitando la imagen, pero demostrando de una forma muy bonita que no es necesario una imagen para decorar. Este punto me interesa especialmente porque la presentación será ante usuarios de Microsoft . Estoy viendo los códigos de la versión reducida pero mi desconocimiento del Javascript me impide, por ahora, poder modificarlo.

Por si no lo dejé claro al principio: tu trabajo es de mucha utilidad, mucho mejor que las otras opciones y… hermoso. Mis felicitaciones.

Rumoroso 15 de October de 2007

Hola Claudio. Gracias por lo que dices y me alegro de que te pueda ser útil.

Acabo de subir la versión ampliada en formato descargable. He puesto el enlace en el artículo. Espero que te sirva. Si tienes dudas acerca de cómo funciona o algo, dímelo, y si quieres compartir con nosotros el estilo que le apliques, encantado.

Gracias. Un saludo

Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También podrías dejar un comentario, o enviar un trackback desde tu sitio.