Suscribirse a los comentarios por RSS

Con SPIP 2.0, más precisamente en la revisión 13407 se agregaron algunos esqueletos al juego de esqueletos estándar.

Unos muy interesantes son los que permiten suscribirse a los comentarios.

squelettes-dist/rss_forum_article.html
squelettes-dist/rss_forum_breve.html
squelettes-dist/rss_forum_rubrique.html
squelettes-dist/rss_forum_syndic.html
squelettes-dist/rss_forum_thread.html

Por ejemplo, en el foro de un articulo, podriamos incluir el siguiente código, antes del bucle de comentarios de un artículo:

[] Suscribite a los comentarios de este artículo

Un código análogo, llamando al esqueleto correspondiente y pasando el parámetro correcto, sirve para las breves, las secciones, los artículos sindicados y los hilos de discusión (en foros con comentarios anidados).

Mostrar u ocultar contenido, fácil

Adrian León consultó en la lista spip-es:

Estoy intentado poner balizas de este tipo:

#BOUTON_BLOCK

#DEBUT_BLOCK

Desde el editor del sitio privado en el texto de un artículo. No conozco la forma de que funcione desde ahí (sale escrito como texto en la página resultante. ¿Hay alguna manera de hacerlo?

Estaba intentando, me enteré después, usar este plugin

Al otro día yo contesté:

Hola Adrián. Desconocía de qué hablabas hasta que Marina mandó el link. Me parece que en el algunas ocasiones los plugins están opacando las soluciones más eficientes e ingeniosas, esas que buscabamos antes de que todo fuese "enchufable". ¡Spip se está wordpressisando!

Lo que quiero decir es que me parece que hay formas mejores de hacer eso. Yo tengo un ejemplo para darte

Andá al pie del artículo, y hacé click en Opinar: despliega (u oculta, depende del estado) el formulario de comentarios.

Es, sin balizas ni plugins, lo que parece que hace esa contrib.

Y el código es de risa: un pelín de jQuery (con su efecto toggle() )

El esqueleto del ejemplo que propongo es bien sencillo. El formulario aparece encerrado en una div y escondido con la propiedad CSS display:none. De manera simplificada [1] :

[(#FORMULAIRE_FORUM)]

Y el link que produce el efecto mostrar/ocultar (en este caso «opinar» )tiene este código.

Opinar

En perfecto argentino se diría: ¡una papa!

Breve explicación: Al hacer click sobre el link, se ejecuta el evento Onclick, que mendiante jQuery (que ya se encuentra en todo sitio SPIP si existe la baliza #INSERT_HEAD en el <head> de los esqueletos), se busca la el bloque con ID «form-comment» (o sea, el div contenedor del formulario), y se aplica toggle(), que es una funcion que si el bloque está oculto, lo muestra, y se está visible lo oculta. Simple y efectivo.

Permitiendo el uso desde la redacción

Hasta aquí el reemplazo al plugin, que no da una solución completa a la consulta de Adrían, porque esta solución también está programado en los esqueletos del sitio. Pero, con simples modificaciones, se puede usar dentro del texto de los artículos.

El truco es este: la balizas no se pueden usar en el texto, pero los modelos sí. Y como spip respeta el HTML, tenemos solución: generamo el link interruptor a través de un modelo [2].

Creamos un modelo dentro de modeles/toggle.html (dentro de la carpeta de nuestros esqueletos) con el siguiente código:

#ENV{texto}

¡Y listo!

Para usarlo, en el cuerpo del artículo se invocaría al modelo con dos parámetros: el identificador del contenedor, y el texto de link controlador.

Donde se quiera mostrar el link escribimos:

System Message: WARNING/2 (<string>, line 95)

Literal block expected; none found.

y donde queramos que vaya el contenido oculto:

Hola amigos, esto es una astucia para el compañero Adrian!
</div>

Sólo hay que asegurarse de que el ID del contenedor sea el mismo que el parametro div que pasamos a nuestro modelo. Por supuesto, esto permite tener múltiples bloques ocultos y link controladores.

El resultado

esto funciona?

¡Hola amigos, esto es una astucia para el compañero Adrian!

Yahoo! Pipes como por un tubo

Yahoo! Pipes es una una herramienta web interactiva para agregar y manipular feeds RSS (y otras fuentes de datos) a nuestro antojo de forma sencilla y asequible para cualquiera.

Es un entorno de programación visual online. La programación visual es común para los ingenieros (Simulink o LabVIEW) y también para los viejos gamers (el glorioso The incredible Machine.

El concepto es simple: se conectan distintos módulos ("tubos", con una o más salidas y entradas) según las necesidades, y se va probando el resultado en una salida final.

En Y! Pipes, luego de toda nuestra manipulación, el resultado es un feed personalizado que contiene únicamente lo que se quiera tener, por ejemplo el resultado de mezclar y flitrar dos o más fuentes de información.

Aplicandolo a SPIP

Frecuentemente queremos ofrecer un canal RSS que provea tanto las breves como los artículos. SPIP maneja estos objetos independientemente y es muy dificil hacer un esqueleto que los mezcle (hay que trabajar con pilas en PHP). Con Yahoo! Pipes es tan sencillo como mezclar los dos (o más) feeds.

Esto lo hice en el sitio Agrupación Mazamorra:

System Message: WARNING/2 (<string>, line 36)

Explicit markup ends without a blank line; unexpected unindent.

El resultado puede verse (y clonarse) desde aquí

Más ejemplos

Pero mezclar feeds no es la única posibilidad. De hecho, Pipes es tan potente que permite obtener datos parseando un sitio web que no tenga un canal RSS o Atom disponible (pero eso es un uso muy avanzado y lo dejamos para otra oportunidad).

Un caso que sí está al alcance de esta breve introducción es filtrar el contenido de un feed. Doy mi ejemplo en uso: me gusta leer a Hernán Casciari que además de su blog, escribe una columna en el diario argentino La Nación. Es un diario asquerosamente oligarca y de derecha (¿redundante?) así que prefieron no leer nada más que a este autor,

Fácil: Busco el feed de la sección donde se publican sus columnas, filtro con la palabra clave ’Casciari’, y me libro de todo lo que no quiero. Aquí el resultado

System Message: WARNING/2 (<string>, line 61)

Explicit markup ends without a blank line; unexpected unindent.

Ejemplo en video

Un screencast de otro blog más

Un cierto blog no ofrece los RSS filtrados por categorías. O por autores. O por ‘tags’. O queremos el RSS de un sitio, eliminando, por ejemplo, todas las entradas que hablen de petanca o del chucho del autor. Vamos, que nos gustaría filtrar el RSS de acuerdo con algún criterio propio. Para eso (y para bastantes más cosas, pero centrémonos en esto) sirve Yahoo! Pipes. Para los interesados, un pequeño ’screencast’ que explica cómo recuperar las categorías (la de desarrollo web, en particular) que se ha cargado Feedburner…

Esqueletos Acción

En septiembre de 2008 participé con un grupo de compañeros de facultad en el Congreso Argentino de Ciencias de la Computación realizado en la ciudad de Chilecito, La Rioja.

Allí realicé un taller de 20 horas sobre Accesibilidad para la web a cargo de las licenciadas Ivana Harrari y Ana Paola Amadeo, docentes de la Universidad Nacional de La Plata.

El taller fue de un nivel bastante bajo y con errores de implementación bastante groseros, partiendo de que parte del material de práctica estaba en formato Adobe Shockwave y todo el curso se centraba en software para Windows. Las docentes, de cualquier manera, fueron muy amables y abiertas a escuchar nuestras inquietudes.

Por este motivo, con los dos compañeros que participamos de este taller, Lourdes Dorado y Agustín Martina, nos propusimos aprovecharlo todo lo que pudiésemos.

Desde aquí se puede bajar los informes de los trabajos prácticos realizados:

|image1|
Workshop sobre Accesibilidad web TP Nº 1
|image3|
Workshop sobre Accesibilidad web TP Nº 2
|image5|
Workshop sobre Accesibilidad web TP Nº 3

Además, la consigna del trabajo final era evaluar las accesibilidad y usabilidad de un sitio web a elección, por ejemplo, el de la facultad de procedencia de cada grupo. Como el de nuestra facu nos avergüenza, decidimos construir nosotros que respete las normas.

Nos basamos en un diseño libre y mejoramos aquellos aspectos que no satisfacían completamente los requerimientos. El resultado es el proyecto *Accion Inmobiliaria*

System Message: WARNING/2 (<string>, line 55)

Explicit markup ends without a blank line; unexpected unindent.

Podés ver la demo online.

Características

- CSS y XHTML estándar válido image7 Se estudió el contraste de colores y el tamaño de la fuente para facilitar la lectura. image8 Accesibilidad probada en navegadores en modo texto (Elink) y lectores de pantalla. image9 Licenciado bajo GPLv3

Descargar

Podés bajarte los esqueletos, modificarlos y usarlos. Como se basa en GPL, tus trabajos derivados deben ser ofrecidos libremente.

¡Basta de IE6!

El trabajo de un desarrollador web cuesta mechones de cabello a la hora de enfrentar al inmundo, malnacido e infeliz Internet Explorer 6. Horas y nervios perdemos intentando que nuestros sitios se vean decentemente en este navegador, que pese a tener casi 8 años de anitgüedad, aun tiene cuota de mercado. ¡Es hora de decir basta! Tomemos las armas y declaremosle la guerra a Internet explorer.

¿Cuáles son nuestras armas?

Te propongo dos, faciles y potentes:

- El script modificado por mí de la campaña End 6!. Sólo debes copiar este código y pegarlo en el header de cada página de tu sitio, o sea entre <head> y </head>.

System Message: WARNING/2 (<string>, line 20)

Literal block expected; none found.

Si un visitante llega usando el vetusto y abominable navegador, verá un cartelito como este:

System Message: WARNING/2 (<string>, line 26)

Explicit markup ends without a blank line; unexpected unindent.

image1 El plugin para spip `Cambia el navegador! <http://www.spip-contrib.net/Changez-de-navigateur>`_ que al instalarlo y activarlo, muestra un mensaje en la cabecera de todo el sitio público si el visitante usa IE6 (o más viejo!)

System Message: WARNING/2 (<string>, line 34)

Explicit markup ends without a blank line; unexpected unindent.
|image3|
Cambia el Navegador!

Puedes bajar este plugin (multilingüe) desde aquí.

Basta de ’caldo gordo’

Como desarrolladores, tenemos cosas mejores que hacer que continuar garantizando la compatibilidad con lo arcaico, perdiendo el tiempo en torno a errores ajenos a nuestros desarrollos. Todo el tiempo dispensado allí debería ser concentrada en conquistar los nuevos horizontes que requieren nuestra atención como, por ejemplo, la web móvil.

Y en gran parte, esta situación es nuestra responsabilidad. Todos los que trabajamos en internet (y los que la usamos con pasión) conocemos y odiamos con fundamentos el Internet Explorer 6. Pero justamente nosotros, por tener razones, somos responsables de difundirlas tanto como podamos para educar tecnológicamente a los usuarios más inexperimentados.

Control de Versiones con Subversion

Xab, compañero de la lista Spip-es me propone un trato:

Abro una cuenta con magoya en picasa y testeo el plugin, y a cambio vos "hacés (o recomendás)" un how-to subversion aplicado a Spip

Como tenía unos materiales de una charla que dí en la facu, lo comparto con el pueblo spipero.

Subversion, un software de control de versiones

Subversion es el software de control de versiones más popular de la actualidad. Es robusto, fácil de usar, multiplataforma, libre y gratuito.

Aquí las diapositivas (un tanto frías sin nuestra explicación) que presentamos.

La pregunta del novato: ¿Para qué sirve?. Bueno, para llevar total control del desarrollo de un software (u otros contenidos). Muchos lo hemos hecho manualmente:

— Bueno, hasta aqui funciona. Hago una carpeta nueva, copio los archivos, y sigo.

Así, al cabo de una semana de trabajo, tenemos 10 carpetas con versiones distintas, archivos repetidos, y no sabemos realmente cual es la version en curso. Más complicado aun, si se trabaja desde distintos equipos (por ejemplo, la notebook y la PC de escritorio).

Pero además, sumemos la complicación de trabajar con colegas.

— Ey, Martín, acá te mando la última versión del esqueleto de portada. — ¡Pero cómo! si te avisé que había modificado la portada completamente!

Trabajar en equipo es casi inviable a la vieja usanza. Imaginen proyectos de software grandes, como SPIP. Imposible. Hace falta ayuda: Subversion.

¿Cómo funciona?

Es una aplicación cliente-servidor. El cliente se instala en nuestra/s computadoras y el servidor está, generalmente, online. A este servidor online se le denomina repositorio. A la copia local de los archivos, copia de trabajo. A cada cambio que el repositorio recibe se le llama revisión.

  • Para Windows, el mejor cliente es TortoiseSVN
  • Para GNU/Linux, basta subversion, la versión para línea de comandos, o RapidSVN, una versión gráfica para entornos GTK.

El proceso de trabajo es más o menos así:

  • Si no existe en el repositorio nuestro código, hacemos un import (enviar por primera vez nuestro código al repositorio.
  • Para empezar a trabajar, necesitamos hace un checkout, es decir, decirle a Subversion que convierta nuestra carpeta de código (o la cree si no existe) en copia de trabajo.
  • Ya preparados, el trabajo cotidiano: lo comandos más frecuentes son tres. update, para actualizar la copia local con las ultimas revisiones; commit para enviar nuestras modificaciones locales al repositorio y crear una nueva revisión y add para agregar un archivo que hemos creado, y aun no existe en el repositorio.

Un ejemplo con SPIP-Zone

Spip-zone tiene un servidor subversion (asociado al software Trac que es un gestor integral de proyectos de software) donde se puede alojar cualquier contenido libre que tenga que ver con SPIP. Es abierto para lectura (podés hacer checkouts y updates anonimamente) pero necesitás ser usuario para hacer commits. Podés pedirle un user y pass a Fil.

Paso 0

Suponiendo que sos usuario con clave y password y querés compartir el desarrollo de tus squeletos, los squelettes_maslindos que están en la carpeta squelettes local (por poner un ejemplo).

La dirección del repositorio, arbitraria pero recomendada, sería svn://zone.spip.org/spip-zone/_squelettes_/maslindos

Desde Tortoise, con el boton derecho sobre la carpeta de esqueletos, le damos a la opción Import y ponemos la dire del repo donde la pide.

Desde línea de comandos sería

$ svn import ./squelettes  svn://zone.spip.org/spip-zone/_squelettes_/maslindos -m "importacion de los squeletos más lindos"

Si la importación salió bien, debería poder ver tus archivos en la dirección http://zone.spip.org/trac/spip-zone/browser/_squelettes_/maslindos

Paso 1

Este es el paso inicial para aquellos que quieren probar algo que está en el repositorio, pero sin intenciones de enviar modificaciones (sólo lectura). Tambien deben hacerlo aquellos que sí lo van a hacer, porque la importación no implica que se haya creado una copia de trabajo.

Así que hay que hacer el checkout. Si hiciste el paso anterior, para evitar complicaciones, lo mejor es borrar la carpeta que importaste.

Entonces sí, sobre la carpeta raiz (donde queremos que se cree la otra), hacemo checkout a la dire del repo, definiendo que la copia local será ./squelettes (si no, nos creará una que se llamará maslindos)

La dire del repo es la siempre:

svn://zone.spip.org/spip-zone/_squelettes_/maslindos

Por línea de comandos sería así:

$ svn checkout svn://zone.spip.org/spip-zone/_squelettes_/maslindos ./squelettes

Pasos 2 y 3

Listo, tenemos nuetra copia de trabajo. Cada vez que queramos actualizar a la ultima versión, parados sobre la carpeta, hacemos update

$ svn  update

Si somos desarrolladores, y queremos enviar nuestras modificaciones, hay que hacer commit

$ svn  update

En caso de agregar archivos, hay que indicarselo a Subversion.

$ svn  add archivo1 archivo2 *jpg

Un video vale más que mil palabras

Un ejemplo de flujo de trabajo por línea de comandos

Y otro ejemplo usando una interfaz gráfica.

Spicasa: adjuntá fotos de picasa a un artículo

Con un poco de coca-cola en la sangre, retomé esta madrugada un proyectito que tenía: adjuntar fotos de un album de Picasa a un artículo.

El caso de uso, basado en mi propia necesidad, es el siguiente:

- Uso PicasaWeb para subir mis fotos. A veces son albumes públicos, a veces no. image1 Al subir fotos, generalmente le pongo una descripción. image2 Algunas fotos las subo también a mi blog personal.

La complicación es que tengo que subir las fotos a picasa y tambien a mi web (por ftp si son muchas). Obviamente es ineficiente, y además pierdo los comentarios que hice en Picasa.

Con ustedes, Spicasa

Spicasa intenta solucionar esto. Está basado en el plugin Flickr_cc pero utilizando la excelente biblioteca Lightweight PHP Picasa API de Cameron Hinkle, para interactura con la API de Picasa

Permite buscar fotos públicas en Picasa y asociarlas a un artículo, al igual que Flickr_cc lo hace con Flickr. Pero además, permite ingresar a tu cuenta y adjuntar uno de tus albumes al artículo. Todo con mucho AJAX y dulce de leche.

image3 Por supuesto, aunque cumple sus función básica, es un desarrollo totalmente inacabado que necesita desarrollo y depuración.

Requerimientos

image4 Requiere SPIP 2.0 o superior image5 La biblioteca Lightweight PHP Picasa API está incluída. Sólo requiere PHP5.

TODO y bugs conocidos

image6 [STRIKEOUT:El tamaño máximo de las fotos descargadas es 800px] image7 [STRIKEOUT:No hace búsquedas de más de una palabra] image8 Hay que loguearse cada vez que se quiere adjuntar un álbum nuevo image9 [STRIKEOUT:La ventana modal queda inaccesible si el scroll vertical no está arriba. (bug heredado de Flickr_cc)]

Descarga e instalación

|image11|
Spicasa 0.13

image12 Descromprimilo en la carpeta /plugins de tu sitio spip image13 Activalo desde el panel de administración image14 Al editar un artículo, te aparecerá un link con el logo de Spicasa para adjuntar fotos.

jQuery, una introducción

jQuery, una librería javascript ligera y sumamente útil, desarrollada por el talentoso programador John Resig.

Como se explica en el sitio web:

jQuery es una biblioteca javascript ligera y concisa que simplifica como atraviesas tus documentos HTML, manejas eventos, realizas animaciones, y agregas interacción Ajax a tus páginas web. jQuery está diseñada para cambiar la manera en que escribes JavaScript

¿Necesitamos otra biblioteca?

El Toolkit Dojo está maduro e incluye hasta el los hielos del whisky. Es ampliamente popular y muchas interfaces UI fueron construidas sobre este toolkit, incluyendo script.aculo.us, Rico, y otros. Por supuesto, no podemos dejar afuera a mootools. Su biblioteca UI, moo.fx, puede apoyarse sobre Prototype si lo deseas. Tambiñen está Y!UI the Yahoo! User Interface library. Y tenemos ExtJs, un robusto framework de interfaz que se basa en Y!UI, Prototype, o jQuery.

jQuery

Lo que nos trae a... jQuery. Sí, otro framework JavaScript. jQuery, sin embargo, es a mi criterio el más rápido y elegante del montón. Soporta CSS3, detección del navegador, encadenamiento de métodos, plugins, Ajax, selectores flexibles, y efectos UI basicos. Todo en menos de 30Kb.

Pues bien, engolosinemos los ojos un poco. Hacé click acá para ver lo que jQuery puede hacer con un par de líneas de código.

Wow! Jquery en acción. ¿Lo ves? Ese efecto se logra con este sencillo código:

$("a.intro").click( function() {
    $("div.introtarget").toggle(100);return false;

Esqueletos de aten.org.ar

Hola amigos de SPIP!

Estos esqueletos estan basados en los de www.spip-contrib.net

El sitio de ejemplo esta temporalmente acá

Simplemente descomprimanlo sobre su raiz de spip. Si tienen un archivo mes_fonctions.php3 salvenlo antes.

La palabra clave con id_mot=2 es "DESTACADOS" y los articulos asociacidos a esta salen en el cuadro central gris del sommaire.html . El resto de las palabras claves pueden pertenecer a otro grupo que sea "tematicas".

quedan detallitos por corregir, como el plan.html que faltó, y mejorar un poco la paginacion de articulos. pero creo que todo funciona.

Estos esqueletos son libres bajo . licencia GPL

Espero les sirva. Martin Gaitan. gaitan@gmail.com

spip, el Gestor de Contenidos

SPIP (Sistema de Publicación para una Internet Participativa, de sus siglas en francés) es un software libre (GPL) en PHP y MySql con la estructura ideal para desarrollar sitios tipo revista en línea, pero también potencia y sencillez sufiente para lograr cualquier objetivo. Spip se comoporta como un espacio donde un grupo de colaboradores escribe textos de contenido y los/as lectores/as pueden comentarlos.