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)
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>
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.
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.