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 Eclipse, Geany, Notepad++, CodeLobster, etc., dependiendo del proyecto.
 Logo de 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):
    + Presionamos la tecla [TAB] =
    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.Logo de Emmet

MODIFICAR LA SECCIÓN DEL HEAD DESDE EL CÓDIGO DE UN COMPONENTE. JOOMLA.

Modificar la sección del head desde el código en Joomla

Modificar la sección del head desde el código de un componente

La sección head de toda página web es de suma importancia. En ella solemos insertar o enlazar el código CSS y de scripts típicos (como JavaScript). Además los datos que contenga pueden tener bastante relevancia en lo que a SEO se refiere. Modificar la sección del head desde el código de un componente no es tan fácil como puede parecer. Vamos a ver como hacerlo.
Normalmente insertamos la cabecera utilizando el siguiente código:

La anterior línea carga el fichero libraries/joomla/document/html/renderer/head.php que contiene los métodos que procesan la sección head y devuelven el código HTML generado.
Ese mismo código HTML lo podemos obtener con:

Pero si lo que queremos es modificar esa sección desde un componente, la cosa se complica un poco si no conocemos lo que Joomla pone a nuestra disposición para realizar esta tarea. Para toda modificación, el método de la clase estática JFactory::getDocument(), nos proveerá de todo lo necesario. Para los siguientes ejemplos, seguiremos usando el ejemplo del código anterior.

Cambiar el título de la página dependiendo de la lógica del componente

El método setTitle(“”) nos permitirá modificar el título:

Añadir estilos CSS dependiendo de la lógica del componente

El enlace a un fichero de reglas de estilos CSS lo hacemos con:

Si solamente queremos añadir unas reglas pero no un fichero completo:

Añadir código JavaScript dependiendo de la lógica del componente

Podemos enlazar un fichero:

O bien simplemente añadir un poco de JavaScript:

La insercción de ficheros CSS y de script, las podemos hacer también, usando el objeto JHTML:

Modificando los metatags dependiendo de la lógica del componente

Desde que los metatags o etiquetas no son tan relevantes en el posicionamiento SEO, su uso se ha quedado un tanto olvidado. Si miramos el código fuente de una web, es probable que nos encontremos con una etiqueta meta del tipo:
… donde se está indicando el software que ha generado el código de la página. Sin embargo sus usos pueden ser muchos y variados, desde redirecciones automáticas de la página, hasta usar las etiquetas meta sugeridas por Facebook que nos permiten compartir nuestros contenidos en su red social.
Joomla pone a nuestra disposición una funcionalidad mediante la cual podemos insertar etiquetas meta. Para ello nos vamos al área de administración y una vez dentro, vamos a:
[En Joomla 3.x] -> [Sitio -> Configuración global]
[En Joomla 2.5] -> [Sistema -> Configuración global]
Nos vamos al apartado donde dice [Configuración de los metadatos] y una vez allí, insertamos las metatags que estimemos oportuno.
En la práctica, lo cierto es que frecuentemente necesitamos una manera dinámica de establecer estos metatags.

Código para modificar los metadatos

Quitar el metatag “generator” puesto por defecto por Joomla:

Otros metatags también tienen su propio método para cambiarlos o establecerlos:

Pero si no dispone de método propio, usamos setMetaData():

Los metas formados de esta manera son los típicos que contienen los atributos name y content. Si queremos que el resultado sea un meta con atributo http-equiv, tendremos que usar el mismo método pero con un argumento más:

Finalmente, debemos tener en cuenta que existen metatags que no corresponden a los estándares, sino que deben ser añadidos para la correcta ejecución de lógica de terceros (como scripts de Facebook por ejemplo):

Eso es todo. Recordad que toda esta información y más, forma parte de los cursos que ofrecemos de Joomla.
Espero que este artículo os sea de utilidad y como reencuentro con la actividad del blog que no he podido atender por falta de tiempo, durante una temporada que ya se hacía larga.
Nada más. Un cordial saludo a todos y hasta otra.

TIPOS DE EXTENSIONES EN JOOMLA.

Tipos de extensiones en Joomla

Tipos de extensiones en JoomlaAlgo que tienen en común la práctica totalidad de herramientas o aplicaciones basadas en PHP, como pueden ser Joomla, Drupal, WordPress, etc., es que permiten su crecimiento, el aumento de sus funcionalidades, mediante el desarrollo de añadidos. Trataremos en esta entrada los tipos de extensiones en Joomla.
Cada herramienta proveerá una serie de reglas que aplicar al desarrollo de estos añadidos que de no aplicarse, harían que nuestros nuevos añadidos no funcionen, no lo hagan correctamente, estemos “reinventando la rueda” (porque ya existe alguna clase o función en la herramienta que realiza lo que queremos, etc.).
En Joomla, estos añadidos reciben el nombre de extensiones y pueden ser de diferentes tipos. Cada uno es distinguible principalmente, por la función que desempeñan en Joomla. De hecho, muchas de las funcionalidades que utiliza Joomla por defecto, han sido creadas mediante extensiones.
¿Cuáles son entonces estos tipos de extensiones?

  • Componentes,
  • Módulos,
  • Plugins,
  • Plantillas,
  • Lenguajes

Componentes

Los componentes son las extensiones más complicadas. Tienen una parte pública (frontend) que muestra los datos resultantes de utilizar el componente y otra administrativa (backend), encargada de permitir la gestión del componente.
Cada componente puede añadirse al menú de navegación del sitio, como un elemento más del menú. De hecho, cada opción de menú, acaba llamando a un componente.
Los componentes son aplicaciones que pueden ser tan grandes como una red social o un portal de empleo y pueden servir de base para otras extensiones. Es común que un componente provea el contenido principal de una página de Joomla.
El menú Componentes contiene un enlace a todos los componentes instalados
Joomla, menú Componentes
Joomla, menú Extensiones
El resto de extensiones, tienen su correspondiente menú en Extensiones

Módulos

Los módulos o “boxes” podemos verlos como miniaplicaciones que podemos situar en diferentes posiciones de las páginas y que presentarán cierta información. Pueden trabajar independientemente, pero suelen estar enlazados a un componente.
Podemos acceder a los módulos a través del Gestor de módulos en el menú Extensiones.

Plugins

Los plugins son un tipo de extensión un tanto especial, pues siempre trabajan en conjunción con otras. Un plugin modifica el comportamiento básico de otra extensión ante un evento. Un ejemplo simple: queremos que cuando se guarde un contenido, el plugin tome ese contenido y elimine de él cualquier palabra que consideremos ofensiva.
El nombre tradicional para los plugins es “Mambots”.
Podemos acceder a los plugins a través del Gestor de plugins en el menú Extensiones.

Plantillas

Las plantillas son las extensiones que establecen el diseño de un portal Joomla y al mismo tiempo, indican las posiciones donde podemos situar módulos. Podemos hacer la plantilla más o menos completa, proveyendo incluso un área administrativa donde el usuario pueda modificar el diseño de ésta, sin necesidad de modificar el código fuente de la plantilla.
Podemos acceder a las plantillas mediante el Gestor de plantillas en el menú Extensiones como siempre.

Lenguajes

Por último, los lenguajes son extensiones más bien simples comparadas con las anteriores, ya que “solamente” traducen los textos de la interfaz de Joomla.
Podemos acceder a las plantillas mediante el Gestor de lenguajes en el menú Extensiones.
En conclusión: todas las extensiones se instalan a través del Gestor de Extensiones:
Joomla, gestor de extensiones
Y eso es todo por hoy, un saludo a todos.