Supongo que S5, el sistema para realizar presentaciones basado en estándares desarrollado por Eric Meyer, es ya un viejo conocido.
He de confesar que no lo he utilizado nunca. Y seguramente jamás llegue a hacerlo: me parece que es como matar moscas a cañonazos (Si no te gusta Powerpoint, puedes realizar presentaciones con OpenOffice o hacer un bonito PDF).
Pues bien, hace unas semanas que estamos trabajando con otro sistema, basado también en XHTML, CSS y javascript, que nos permite generar la presentación a partir de un solo documento:
DOMSlides de Christian Heilmann, ligero y grácil cual felino. Y sino, compruébalo navegando por la demo.
Últimamente, algunas webs como la BBC han modificado su diseño para hacerlo modular y permitir que el usuario realice Drag&Drop de los módulos para colocarlos cómo más le guste, algo que Netvibes o iGoogle ya hacían hace bastante tiempo. Afortunadamente, ahora con jQuery UI se puede realizar de forma muy sencilla.
El tutorial que enlazo explica paso a paso cómo hacerlo haciendo uso de jQuery, jQuery UI mediante los sortables y jQuery Cookies para trabajar con cookies de forma facil (y poder recuperar la configuración cuando el usuario vuelva a conectarse).
PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.You use it by applying a class to an element on the page and setting a few parameters with some extra HTML attributes. If the element is an img or it has a background-image set in your CSS, PaintbrushJS will create …
jQuery Graceful Websocket es un plugin jQuery que nos permite comunicarnos con el servidor usando websockets de HTML5. El problema es que tan solo Chrome permite los websokets (creo que Firefox los tiene desactivados por defecto por temas de seguridad), además se necesita que el servidor los pueda tratar, por lo que este plugin permite una alternativa mediante Ajax transparente al desarrollador.
// Si el servidor no admite websockets sustituye el ws:// por http://
var ws = $.gracefulWebSocket("ws://127.0.0.1:8080/");
// Envía datos al servidor.
// Si el servidor no admite websockets lo envía mediante POST
ws.send("message to server");
// Recibe datos del servidor
// Si el servidor no admite websockets hace un polling mediante GET
ws.onmessage = function (event) {
var messageFromServer = event.data;
};
Algo que considero necesario a la hora de programar en Javascript es conocer el DOM. Aunque hay gente que prefiere la creación de objetos mediante innerHTML, incluso hay estudios sobre cual es más eficiente, siempre viene bien saber utilizar el DOM para poder manejar elementos HTML.
Si no controlas el uso del DOM, aquà os dejo un tutorial bastante claro que os ayudará a meteros de lleno. De todas formas, tambien recomendaros una página XULPlanet, la cual es una de mis favoritas para buscar documentación sobre los objetos HTML. W3C DOM
VÃa / dzone
El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.
¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.
Ahora toca explicar la parte CSS, para ello usaremos CSS counters.