Si Twitter funciona con 140 caracteres los comentarios a nuestros artículos podrían tener 200, ¿no?
Hay una forma fácil de limitar el largo permitido en un campo de texto mediante jQuery, que vaya mostrando de manera interactiva la cantidad de caracteres restantes.
Por ejemplo, esto limita el tamaño de un comentario en SPIP.
$(document).ready(function () {
$("#texte").before("<div id='chars' style='float:right;font-weigth:strong;margin-right:5px;'></div>");
$(function(){
$('#texte').keyup(function(){
limitChars('texte', 200, 'chars');
})
});
});
function limitChars(textid, limit, infodiv) {
var text = $('#'+textid).val();
var textlength = text.length;
if(textlength > limit) {
$('#' + infodiv).html('No puede ingresar más de '+limit+' caracteres');
$('#'+textid).val(text.substr(0,limit));
return false;
} else {
$('#' + infodiv).html('Restan '+ (limit - textlength) +' caracteres.');
return true;
}
}
</script>
Intrucciones para SPIP
- Copiar el código
- Pegarlo luego de la baliza #INSERT_HEAD de tu cabecera
- (opcional) Cambiarle el límite (el número 200),
¡Listo!
Intrucciones generales
Es igual al anterior, sólo debes asegurarte que tiene en jquery en la página. Luego cambia el selector #texte por el que corresponda al campo que querés limitar.
Ejemplo
Mirá un ejemplo en La Voz de Lanzarote. (click en ’opinar’, en la barra posterior al artículo)
Como sabemos, el desarrollo de SPIP se realiza a través del sistema de control de versiones Subversion.
A través de Subversion, podemos obtener la ultima version de desarrollo considerada estable
Una de las ventajas de obtener SPIP a través de SVN, es que luego es muy fácil de actualizar.
Subversion asigna un numero de revision a cada cambio realizado al conjunto de archivos. Así, cuando los desarrolladores lo evaluan pertinente, en un determinado momento del desarrollo se empaqueta una nueva version "oficial"
Por ejemplo, la revisión 13982 es la version 2.08 de Spip.
Podemos obtener una revision específica con el parámetro -r. Por ejemplo, el siguiente comando obtendría una copia de SPIP 2.08
Genial, pero para para asegurarnos estar en una revision que se corresponda con una "version oficial" tenemos que saber el número de ID.
En el Trac de Spip se mantiene una tabla donde se especifica esta correspondencia para cada nueva version, pero a decir verdad, es un engorro tener que ingresar sólo para averiguar un número. Mejor hagámoslo automático!
Automatizando la obtención de un SPIP oficial por SVN
- #!/bin/bash
- #script para una instalacion de spip a traves de svn
- if [ $# -lt 1 ]
- then
- echo "Debe indicar al menos un parametro:"
- echo "$0 destino [rev]"
- echo
- exit 1
- fi
- if [ $# -eq 2 ]
- then
- REV=$2
- else
- echo "Averiguando revision de la ultima release..."
- REV=$(svn info svn://trac.rezo.net/spip/archivelist.txt | sed -n '9p' | cut -d' ' -f5)
- fi
- echo "Recuperando la version $REV de SPIP"
- svn checkout -r `echo $REV` svn://trac.rezo.net/spip/branches/spip-2.0/ $1 1>/dev/null
- echo "Configurando permisos..."
- cd $1
- chmod 657 IMG local tmp config
- echo "Lanzando el navegador para continuar la instalacion..."
- firefox http://localhost/~tin/$1/ecrire
Este script hace el trabajo aburrido por nosotros. Averigua cuál fue la última modificación de archivelist.txt que es un archivo que se modifica en cada nuevo lanzamiento de paquete. ¡Es el dato que nos hacía falta!
Una solución más genuina
Atención: Ya me hicieron caso. Ver actualización
Aunque el hacking (como este) es sano y divertido (y a veces también útil), la solución más genuina sería que los desarrolladores de SPIP mantengan un tag por cada nuevo empaquetamiento y uno que apunte siempre al último.
Por ejemplo, con el siguiente comando deberiamos obtener la version 2.05 (sin saber a qué numero de revision corresponde)
y con este otro obtener la última versión
Esto, por ahora, no está implementado, pero ya hice llegar mi propuesta a l’equipe de SPIP, y lo están discutiendo
Actualización
Gracias a Gilles el Dev Team adoptó mi propuesta y ahora existen Tags en el arbol SVN de spip. En particular,
siempre devolverá la versión estable de la rama 2 de Spip. ¡Bien!
Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
Cuando estamos desarrollando necesitamos ver cómo quedará el contenido, y debemos recurrir a un copy & paste de caulquier cosa que tengamos a mano.
La ventaja de un Lorem Ipsum sobre otros textos, es que este tiene una distribución del largo de las palabras bastante natural de las palabras lo que en textos largos queda mucho mejor que repetir un mismo fragmento una y otra vez.
Hay muchos generadores de texto Lorem Ipsum en internet, pero lo podemos hacer aún más fácil.
Un Lorem Ipsum automático
Con la ayuda del plugin jQuery Lorem Ipsum de Sander Korve hice un modelo (instalable como plugin) que permite insertar un texto del tamaño que queramos (por omisión, de 4 párrafos).
Podés bajarlo desde acá:
- Lorem Ipsum Plugin
- version 0.2
O por SVN:
svn checkout svn://zone.spip.org/spip-zone/_plugins_/_test_/loremipsumInstalación
La instalación es igual que con la de cualquier plugin: descomprimirlo en la carpeta /plugins y activarlo.
Requiere además que los esqueletos tengan la baliza #INSERT_HEAD dentro del header, ya que allí se incluirá el javascript necesario para su funcionamiento.
Funcionamiento básico
La inclusión de un Lorem Ipsum se basa en el modelo lorem.html incluído con el plugin, por lo que hay dos maneras de llamarlo:
En el cuerpo (texto, descripción, etc) de un artículo: <lorem>
Predefinido en un esqueleto: #MODELE{lorem}
¡y listo!
Parámetros
El modelo acepta algunos parámetros para configurar la longitud del texto. Por ejemplo <lorem5> creará 5 párrafos.
Pero también se puede especificar más datos:
type: permite especificar que tipo de resultado se quiere. Las opciones válidas son paragraphs, words o characters para párrafos, palabras o characteres. Así:
amount: Es lo mismo que el ID pasado al modelo:
[1].
ptags: Permite agregar las etiquetas <code<>P<>/code> alrededor de cada párrafo. Los valores aceptados son true o false. Por omisión es true.
Una astucia
Una forma de mostrar contenido en un artículo (o cualquier elemento) sin tener que editar cada artículo sólo para poner <lorem> es invocar el modelo siempre y cuando no exista contenido en la baliza
Por ejemplo [2]:
<h1 class="#EDIT{titre}">[(#TITRE|supprimer_numero)]</h1>
[<div class="#EDIT{chapo} chapo">(#CHAPO|image_reduire{740,400}|sinon{#MODELE{lorem}{amount=2}})</div>]
[<div class="#EDIT{texte} texte">(#TEXTE|image_reduire{740,400}|sinon{#MODELE{lorem}{amount=5}})</div>]
</BOUCLE_article>
Hace algunos días, en spip-es se planteó la duda de cómo controlar una cabecera diferente para algunas secciones en particular.
Xabi aportó la solución canónica, que es crear esqueletos ad-hoc para cada sección difente, valiendose de los esqueletos con forma rubrique-X.html (donde X es el ID de la sección).
Esto se describe en el apartado "Para ir más lejos" de la documentación.
En este caso particular, sólo se quería mostrar el logo en la cabecera para algunas secciones. El problema es que las secciones "diferentes" serían iguales entre sí, pero invocando distintos esqueletos. Esto contradice el principio DRY siempre deseable en todo desarrollo de software.
Una forma sencilla, pero a la vez parcial de resolver esto, es hacer un enlace duro entre los esqueletos que son iguales.
Por ejemplo, la sección 2, la 4 y la 6, tendrán el mismo esqueleto. Entonces creamos el rubrique-2.html y definimos rubrique-4.html y rubrique-6.html como enlaces duros al primero. Desde la línea de comandos:
$ ln rubrique-2.html rubrique-4.html
$ ln rubrique-2.html rubrique-6.htmlEsta solución funciona, pero es sólo para servidores *nix y teniendo acceso a la consola (por SSH, por ejemplo). Además, hay que documentar bien qué se está haciendo, porque da lugar a errores cuando dos esqueletos "linkeados" intentan ser iguales.
Por suerte, hay varias otras maneras de resolver esto,
Filtros de condición o filtro match
Esta solución, es la que aportó Juan Pablo Portugau.
Lo que plantea, es usar la baliza #ID_RUBRIQUE (que obviamente, devuelve el número de la sección) con filtros de comparación. Es, hablando en geek, un simple if: Si es la sección 2, mostrar el logo. Sino, nada:
En código SPIP:
La limitación de esta solución se da cuando son múltiples los valores posibles. En nuestro caso, se debe mostrar el logo cuando se trata de la sección 2, de la 4 o de la 6. Juan Pablo propone anidar esta estructura.
Aunque es sintácticamente correcto, el código resultante es bastante inmantenible para un ser humano con cerebro normal y el monito parseador de SPIP queda agitado.
Para eso existe el filtro match, que se vale de las expresiones regulares para que hagamos nuestro festín.
Lo de arriba, puede reducirse a esto:
El filtro devuelve VERDADERO si el valor de #ID_RUBRIQUE empieza con 2, 4 o 6 y termina con nada. Que es, dicho de otra manera, lo que queremos.
Y aún más claro: bucles como filtros
Las expresiones regulares no son moco de pavo, diría mi abuela. Super potentes, pero poco escalables en la curva complejidad-comprensibilidad.
Hay una solución que es muy útil, sencilla pero no trivial: usar un bucle como filtro.
#LOGO_RUBRIQUE
</BOUCLE_muestra_logo>
La explicación es de la lógica de conjuntos: los criterios de un bucle funcionan como condiciones AND. Deben cumplirse todas. En este caso, el primer criterio {id_rubrique IN (1,2,4)} exige que el id_rubrique sea 1, 2 o 4. En el segundo {id_rubrique}, se exige que sea el que viene en contexto. Por lo tanto, este bucle sólo funcionará (mostrará el logo) si el id_rubrique del contexto es 1, 2 o 4. En lógica, es una operación O exclusiva
Funciona, es más legible que cualquiera de las otras soluciones y además permite una clausula ELSE mucho más accesible, simplemente usando la estructura completa del bucle.
#LOGO_RUBRIQUE
</BOUCLE_muestra_logo>
</B_muestra_logo>
[código si no es 1, 2 o 4]
</B_muestra_logo>
Como siempre, espero sirva mi aporte.
Muchas balizas SPIP generan código HTML como salida (las balizas #LOGO_* y los filtros |image_* son los más notorios) y frecuentemente necesitamos o queremos modificar este código autogenerado en nuestros esqueletos. Hay diversos filtros para ayudarnos a esto (inserer_attribut para insertar atributos y extraire_attribut para extraer el valor de uno generado) pero son particularmente largos y tediosos de tipear.
Más allá de eso, aunque uso estos filtros bastantes seguido para implementar cosas como galerías de imágenes, todavía pienso lo difícil que es escribir las palabras en francés sin equivocarme. Por suerte, un pequeño wrapper, puede suavizar este inconveniente.
Cuando se trata de acceder y modificar atributos de valores de atributos nada, en mi opinión, llega tan lejos como la API de atributos de jQuery. El método de jQuery attr por sí solo, permite leer y escribir el valor de cualquier atributo en cualquier nodo. Recibe uno o dos parámetros, el nombre del atributo, y opcionalmente, el valor.
Si sólo se especifica el nombre, entonces attr extrae y devuelve el valor de ese atributo. Si ambos parámetros son pasados al método, entonces attr modifica el objeto configurando el atributo en cuestión con el valor dado. Es jerga de Programación Orientada a Objetos, es un estilo de interfaz "polimórfica" — cuando un solo método tiene dos comportamientos complementarios que son distinguidos por el número y/o el tipo de los argumentos dados — que está por todos lados en jQuery y es una de las razones por las que este framework es tan conciso y productivo.
Considerandola como la mejor estructura para este tipo de interfaces que conozco (y también, que uso diariamente), decidí ue mi wrapper tendría que copiarlo. Así fue como el attr nació.
Como el método de jQuery, el filtro attr de SPIP toma uno o dos parámetros (y un objeto "implícito", pero lo ignoraremos por el momento). Si sólo pasamos uno, este lo remite como entrada a extraire_attribut para obtener el valor correspondiente. Si se lo llama con dos parámetros, entonces llama a inserer_attribut para modificar el objeto.
Como la idea, el código es razonablemente sencillo; la únca
Like the idea, the code is reasonably straightforward; quizas lo único un poco inusual el uso de func_get_args para obtener el conjunto de los argumentos pasados a la función llamada. Con ese array podermos usar count para saber cuantos argumentos se pasaron y decidir qué se debe hacer. Esto es más seguro que especificar y evaluar valores por defecto (FALSE o NULL, por ejemplo) porque algunos usuarios genuinamente podrían querer usar esos valores (supongamos que NULL signifique eliminar el atributo en una futura versión).
/**
* The `attr` function allows the user to get and set the attributes of an HTML tag.
* It is intended to be used as a SPIP filter and depends on existing SPIP functionality.
*
* @param $tag
* The HTML code.
* @param $name
* The name of the attribute.
* @param $val...
* The new value for the attribute $nom. Optional.
* @return
* If $val was given, the code for tag with $name=$val
* Otherwise, the value for the $name attribute in $tag.
*/
function attr($tag, $name){
$args = func_get_args();
if (count($args) > 2) {
// SET
return inserer_attribut($tag, $name, $args[2]);
} else {
// GET
return extraire_attribut($tag, $name);
}
}
Simplemente copia el código en mes_fonctions.php (Mira "Agregar funciones propias" en la documentación sobre filtros de spip) y luego usa el filtro attr en tus esqueletos:
[(#FICHIER|image_reduire{100,100}|attr{alt,#TITRE})]
</a>
Hay algunos cambios que se puede hacer a esta función: pasar $args directamente a inserer_attribut y extraire_attribut en vez de las variables individuales, agregar un parámetro $value=FALSE que sólo sirva para la claridad de la documentación , y el mencionado, eliminar atributos cuando se pase por ejemplo NULL como parámetro.
Una nota final: probablemente necesites correr PHP 5 para que esto funciones — la docu de func_get_args menciona la versión 5.3.0 — y el código de arriba fue modificado luego del último testeo, pero debería funcionar de cualquier manera.
Desde la versión 1.4, SPIP tiene una baliza calculada #INTRODUCTION que como su nombre indica, sirve para presentar una introducción al artículo completo.
En la documentación explica
#INTRODUCTION: [SPIP 1.4] si el artículo contiene una descripción, esta se utiliza aquí; si no, SPIP muestra los 600 primeros caracteres del inicio del artículo (del epígrafe, y luego del texto).
En la versión 1.92 se incorporó otro atajo para indicar el largo del texto mostrado (sobrecargando los 600 caracteres por omisión).
Así, #INTRODUCTION{150} mostrará la descripción, si existe, o los primeros 150 caracteres del epigrafe y/o el texto.
Pero con la versión 2 llegó por fin un control más profundo para los redactores. Es posible definir cual es el texto que se mostrará con #INTRODUCTION encerrandolo entre la etiquetas <intro>...</intro> en el cuerpo del artículo. [1]
Así podemos redactar nuestro artículo con la siguiente estructura:
Suponiendo que la baliza #INTRODUCTION se muestra en el esqueleto de seccion, allí se vería el texto
Esta oración es la introducción al articulo.
Y donde esté la baliza #TEXTE:
Esta oración es la introducción al articulo. Y acá sigue mi artículo completo.
¡Espero sirva!
Más por costumbre que utilidad solemos poner la antigüedad de un sitio web al pie de página, asociado al símbolo ©, o (cc) si usamos Creative Commons.
En el 2007 hicimos el sitio, y en este 2009 todavía muestra.
© 2007
¡Muy feo! Aunque no hayamos actualizado el sitio desde entonces, nuestro deber, como buenos mentirosos, es lograr que el visitante no se entere.
Así que podemos hacer que el año, o el período Año inicio - Año actual se actualice automáticamente.
Muy simple:
- ©
- <BOUCLE_yearbegin(ARTICLES){par date}{0,1}>
- #SET{year, #DATE|annee} #GET{year}
- </BOUCLE_yearbegin>
- [(#GET{year}|=={#DATE|annee}|?{'' , - #DATE|annee} )]
Explicación
Por convención, asumimos que el año de inicio del sitio es el año del primer artículo publicado, lo cual a mi me suena bastante lógico.
Un bucle recupera esta información, la muestra y a la vez la guarda en una variable spip
.
Fuera del bucle comparamos el año ya mostrado con el actual, obtenida de la baliza #DATE sin contexto. Si son iguales, no se muestra nada más (para que no quede algo como
© 2009 - 2009, que quedaría bien feo). Pero si son distintos, se muestra el año actual
El resultado, será
© 2007 - 2009
Y si la lógica o el reloj del servidor no fallan, en cada año nuevo se incrementará el año final del período sin que toquemos una línea de código.
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.htmlPor ejemplo, en el foro de un articulo, podriamos incluir el siguiente código, antes del bucle de comentarios de un 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).
Lamentablemente, el RSS aun no es de uso masivo, pero es una buen incentivo ofrecerlo a quien lo desee.
Uno pequeño truco con jQuery para mostrar u ocultar un bloque de información. Basado en una respuesta que dí en la lista Spip-es.
Un screencast y algunos ejemplos de esta potente herramienta para manipular fuentes de información
Un juego de esqueletos con énfasis en la usabilidad y la accesibilidad
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>.
Si un visitante llega usando el vetusto y abominable navegador, verá un cartelito como este:
El plugin para spip Cambia el navegador! 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!)
- 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.
¡A ganar la batalla final!
Una presentación que hice con mi amigo Pablo Martínez sobre Control de Versiones con Subversion
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.
Los esqueletos de http://www.aten.org.ar disponibles para la descarga
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.
Spip es más un espacio activista, permite la generación de debates con su propio sistema de foros asociados a artículos secciones y noticias breves. Como ya hay cientos de este tipo de software muy buenos.. ¿por que es mejor SPIP?.