Translate

viernes, 2 de diciembre de 2016

MIGRACIÓN DEL BLOG

Hola a todos. Hace bastante que no actualizo este blog y, entre otras cosas, la razón principal es que tenía pensado migrar todo a otro proveedor. El actual es: http://softwarelibreblog.orbispservices.com/.

Actualmente se van añadiendo nuevas entradas, migrando las existentes en éste de Blogger y actualizándolas, por tanto, aún tiene poco contenido.

lunes, 2 de marzo de 2015

PROGRAMACIÓN. EL PLUGIN EMMET.





Hoy quiero escribir sobre una herramienta que, aunque los desarrolladores web la encontrarán útil en general, serán los maquetadores en particular los que la encontrarán especialmente útil y, de hecho, es probable que ya la conozcan. Cualquier freelance que realice proyectos pequeños donde lo mismo se realiza el "backend" como el "frontend", le sacará mucho partido.

Los usuarios del editor de código, Sublime Text, seguramente son viejos conocidos de este plugin. Personalmente, el hecho de que Sublime sea una herramienta de pago, lo deja fuera de mi elección en principio, puesto que prefiero el software libre y hay muy buenas alternativas. En lo particular uso Geany, Eclipse y Notepad++.

Logo del plugin Emmet
No es una herramienta nueva, desde luego, pero si realmente útil. Me refiero al plugin Emmet, anteriormente conocido como Zend Coding, y la buena noticia es que está disponible para diferentes entornos de trabajo y editores, tal y como puede verse en la página de Download.

Como puede verse, los usuarios de herramientas como Vim y Emacs pueden utilizarlo. Pero si como yo, utilizas Geany a menudo, la cosa se complica un poco, ya que no aparece directamente en la web de Emmet.

Tendremos que utilizar una adaptación que puede conseguirse aquí: https://github.com/sagarchalise/geanypy-emmet

Las funcionalidades que nos ofrece Emmet son:

  • Procesamiento de abreviaturas:
    Escribimos unas secuencias de caracteres que se transforman en un bloque de código HTML con solamente pulsar una tecla (Tab normalmente). Ejemplo (viene en la documentación oficial):

    #page>div.logo+ul#navigation>li*5>a{Item $}
    + Presionamos la tecla [TAB] =
    <div id="page">
    <div class="logo"></div>
    <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
    </ul>
    </div>
    

    La documentación acerca de todas las funcionalidades de Emmet es excelente, así que me limito a poner enlaces a su documentación, aún a riesgo de hacer un poco más incómoda la lectura del artículo:
    http://docs.emmet.io/abbreviations/
  • Generador "Lorem Ipsum":
    Dentro de la funcionalidad de abreviaturas, podemos generar textos "Lorem Ipsum".
    http://docs.emmet.io/abbreviations/lorem-ipsum/
  • Abreviaturas CSS:
    Siguiendo con abreviaturas, CSS no escapa a ellas y podemos generar (entre otros), el código CSS necesario para realizar gradientes compatibles con diferentes navegadores:
    http://docs.emmet.io/css-abbreviations/gradients/
  • Corrección de abreviaturas CSS:
    Emmet buscará por nosotros la abreviatura CSS correcta, si no hemos escrito correctamente la abreviatura, tal como se indica en:
    http://docs.emmet.io/css-abbreviations/fuzzy-search/
  • Búsqueda de par de etiquetas:
    Toda etiqueta está formada por una de apertura y otra de cierre. Si nos situamos dentro de un texto, Emmet puede buscar y seleccionar el texto donde estamos situados, más el par de etiquetas (apertura y cierre) que lo contiene:
    http://docs.emmet.io/actions/match-pair/
  • Búsqueda de la etiqueta complementaria:
    Funcionalidad que complementa a la anterior. Si nos situamos en una etiqueta de apertura o cierre, Emmet buscará su contraparte:
    http://docs.emmet.io/actions/go-to-pair/
  • Anidamiento de código:
    Podemos situarnos en un código ya creado y lo podemos meter dentro del código resultante de la expansión de una abreviatura:
    http://docs.emmet.io/actions/wrap-with-abbreviation/
  • Desplazamiento rápido del punto de edición:
    Podemos desplazarnos rápidamente por diferentes bloques de código (HTML o no).
    http://docs.emmet.io/actions/go-to-edit-point/
  • Selección de elemento:
    Similar al anterior, pero seleccionando el elemento al que se desplaza.
    http://docs.emmet.io/actions/select-item/
  • Cambiar a comentario y viceversa:
    Es una funcionalidad que traen por defecto muchos editores. Emmet analiza el elemento dónde se encuentra el cursor (no hace falta seleccionar código) e intuye el tipo de comentario que debe insertarse.
    http://docs.emmet.io/actions/toggle-comment/
  • Unir y partir etiquetas:
    Modifica una etiqueta haciendo que aparezca su etiqueta de cierre o tratándola como un elemento vacío.
    http://docs.emmet.io/actions/split-join-tag/
  • Borrar etiqueta:
    Permite borrar una etiqueta que tiene un bloque de código anidado, sin borrar ese bloque de código anidado.
    http://docs.emmet.io/actions/remove-tag/
  • Fundir línea de código:
    Aunque es una funcionalidad que tienen diversos editores, Emmet permite eliminar los saltos de línea sin necesidad de seleccionar, solamente por el contexto.
    http://docs.emmet.io/actions/merge-lines/
  • Tamaño de una imagen:
    Según el contexto, añade el ancho y alto a una imagen.
    http://docs.emmet.io/actions/update-image-size/
  • Evalúa expresiones matemáticas:
    Emmet es capaz de evaluar expresiones matemáticas.
    http://docs.emmet.io/actions/evaluate-math/
  • Incrementa y decrementa números:
    Muy útil cuando trabajamos con propiedades CSS con valores numéricos.
    http://docs.emmet.io/actions/inc-dec-number/
  • Propagación de cambios:
    Para proveer compatibilidad entre navegadores, muchas veces se recurre a utilizar varias propiedades CSS, con distinta sintaxis, pero que realizan lo mismo. Si cambiamos el valor de una, Emmet cambiará el valor de todas las relacionadas, según el contexto.
    http://docs.emmet.io/actions/reflect-css-value/
  • Codificación y decodificación de imágenes:
    Codifica o decodifica una imagen en base64. En mi opinión, una excelente funcionalidad que evita usar alguna herramienta externa.
    http://docs.emmet.io/actions/base64/
Existen algunas más, como la creación de plantillas, mediante las cuáles podemos usar una abreviatura para generar todo un documento HTML. Pueden verse en la citada documentación.
Como las funcionalidades son muchas, la sintaxis de las abreviaturas amplia y las combinaciones de teclas numerosas, Emmet aporta una
"chuleta" o referencia en un documento PDF.

Emmet es personalizable

Las teclas y combinaciones de éstas que ejecutan las acciones que describen las anteriores funcionalidades son totalmente personalizables. Sirva de ejemplo: me encontré que al instalar el plugin Emmet en Eclipse, al escribir los corchetes [], se ejecutaba una acción de desplazamiento y no se escribían los corchetes. Personalicé estas acciones y asunto arreglado.

La personalización de las combinaciones de teclas, dependerá del editor al que añadimos el plugin, pero podemos hacerlo de dos formas: o bien el plugin provee una interfaz para el editor (como mi caso con Eclipse), o bien modificamos directamente unos ficheros JSON como se describe aquí: http://docs.emmet.io/customization/

El único "pero" que le veo, es que para sacarle todo el jugo, hay que usarlo frecuentemente para que todas esas abreviaturas, acciones, etc., se nos queden grabadas de tal forma que las usemos de forma inconsciente, aparte de preparar plantillas y personalizar lo que no nos guste.

Recomiendo su uso por el aumento significativo de productividad que supone. Nada más, un cordial saludo y hasta la próxima.

lunes, 2 de febrero de 2015

JOOMLA. LÍMITE DE PALABRAS INTRODUCIDAS EN EL EDITOR.

Patrocinador




Anteriormente, ya me había encontrado con la problemática de limitar el número de caracteres o palabras que pueden escribirse en un campo de tipo editor en Joomla:

Joomla. Campo tipo Editor Es el campo que aparece cuando queremos crear un artículo nuevo por ejemplo, tal como se ve en la imagen de la izquierda.

Este tipo de campo muestra un editor WYSIWYG donde puede crearse el contenido correspondiente; tal como hemos mencionado, un artículo por ejemplo.

No son pocos los usuarios a los que les gustaría establecer un límite en la cantidad de información que se introduce. Puede ser muy útil conocer ese dato y tenerlo en cuenta por si ese contenido ha de mostrarse en un dispositivo móvil, queremos que sea de una determinada extensión por motivos de atención del usuario, etc. Los requerimientos pueden ser muchos. El usuario manda.

Necesitamos entonces limitar el número de caracteres. Sin embargo aquí surge el primer escollo. Estamos trabajando con un editor WYSIWYG que "internamente" tiene elementos HTML que, implicando un cierto número de caracteres, visualmente es posible que solamente resulten en un salto de línea, como puede ocurrir con el elemento <BR />.

Es preferible por tanto, no limitar el número de caracteres, sino más bien, el número de palabras introducidas en el editor.

En el momento en que se publica este artículo, la última versión estable de Joomla es la 3.3.6 y su editor WYSYWIG para campos de tipo editor por defecto, es TinyMCE versión 4.1.2. Esta versión también dispone de un plugin que permite mostrar cuántas palabras llevamos introducidas y que podemos ver en funcionamiento, si configuramos TinyMCE para que opere en modo extendido. Lógicamente podemos cambiar el editor WYSIWYG por defecto, pero nos centraremos en el que viene en Joomla tal cual, sin aditivos y de paso, nos sirve para saber como cambiarlo en cualquiera de nuestras aplicaciones que usen TinyMCE como editor HTML.

Estableciendo un límite de palabras para TinyMCE

Lo primero que tenemos que hacer es localizar el sitio donde realizar nuestros cambios. El fichero que necesitamos se encuentra en:

$SU_CARPETA_JOOMLA/plugins/editors/tinymce/tinymce.php

En la línea 575 del fichero aparece una instrucción switch que controla las opciones con que se inicializará el editor, dependiendo del modo en que esté configurado en Joomla:


Joomla. Código inicializador de TinyMCE

Si queremos que el límite de palabras introducidas en el editor, se procese en todos los modos, tendremos que hacer las modificaciones en todos ellos. En este artículo, estableceremos el límite en el modo extendido solamente (línea 655), ya que suele ser el más usado.

El cambio, básicamente consiste en añadir el parámetro setup al método init:

case 2: /* Extended mode*/
$return = $load . "\t<script type=\"text/javascript\">
   tinyMCE.init({
setup: function(ed){ ed.on('keydown', function(e){ // Inicializamos una constante con el límite que deseamos. var LIMITE_PALABRAS = 200; // Utilizamos expresiones regulares para obtener, primero los caracteres y después las palabras. var caracteres = ed.getContent().replace(/<[^>]*>/g, '').replace(/\s+/g, ' '); caracteres = caracteres.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); var numeroPalabras = (caracteres.split(/[\w\u2019\'-]+/).length) - 1; // Si el número de palabras supera al límite que guarda la constante... if ( numeroPalabras > LIMITE_PALABRAS ) { // Controlamos que no se esté pulsando borrar o retroceso y podamos eliminar caracteres. if ( e.keyCode != 8 && e.keyCode != 46 ) { // Aquí realizamos la acción que mejor nos convenga. alert(\"Ha sobrepasado el limite de \" + LIMITE_PALABRAS + \" palabras.\"); e.preventDefault(); } } });
}, // ... resto del código ...

Una vez guardados los cambios y recargada la página, cada vez que queramos añadir más palabras de las indicadas en la constante LIMITE_PALABRAS, aparecerá un alert indicándonos que hemos sobrepasado el límite y evitando que introduzcamos más información.

Por supuesto, dependiendo de versiones, puede cambiar. Nada más, espero que lo encontréis útil.

Un cordial saludo.