Creando una calculadora – introducción a Electronjs

Ejemplo Calculadora con electron.js

El siguiente post es el inicio de un manual que nos llevará paso a paso por el desarrollo de una aplicación con electron.js, la intensión es llegar asta la producción, publicación y el sistema de actualizaciones:

 

Electronjs (intro y un poquito de historia):

El proyecto Electron.js inicialmente concebido como Atom-Shell ya que inicialmente fue la herramienta que permitía al equipo de github generar el binario de Atom el cual es un editor de código multiplataforma.

Comenta la historia que los miembros de github tenían problemas con integrar su desarrollo ya que tienen un gente muy eficiente en lenguajes de bajo nivel (p.e. Scott Chacon) y por otra parte tienen excelente elementos en el manejo del UX (p.e. Mark Otto).

Todo esto genero algo de conflicto ya que querían llevar todo el look and feel de la web en una aplicación de escritorio, fue entonces cuando a Cheng Zhao se le ocurrió la maravillosa de crear Atom-Shell partiendo de :

  • Realizar la  aplicación utilizando un  webView de código abierto (utilizaron Chromium).
  • Programar la lógica desde Javascript utilizando nodejs (con todos los módulos compatibles).

funcionamiento de electron.js

Instalando electronjs.

Una ves explicado que es electronjs y que hace uso de nodejs por lo tanto para empezar a construir aplicaciones con electron.js necesitamos:

Creando un programa electron.js

Electronjs define varios elementos de los cuales los elementos mas basicos son dos:

  • browserWindow: que es la ventana gráfica, de este objeto abra una instancia para cada ventana de la aplicación.
  • app: es la aplicación de electron.js de esta solo existe una instancia que contiene la aplicación(solo hay una única instancia).

La siguiente estructura de directorios es la que tendra inicialmente el proyecto:

|--package.json        <-- Def. del proyecto, p.e. la lista de dependencias
|--disparador.js       <-- Se encarga de arrancar electron
`--src/
   |-- estilo.css      <-- Contiene el diseño de la aplicación
   |-- icon.png        <-- El icono de la aplicación
   |-- index.html      <-- Contiene la interfaz de la aplicación
   `-- logica.js       <-- Administrar la lógica de la aplicación

El funcionamiento de la aplicación la trataré de describir con el siguiente diagrama:

Diagrama de flujo de la aplicación

En la siguiente imagen se muestra a grandes rasgos como esta construida la interfaz.

Elementos que componen el UI de la aplicacición

 

Me gustaría explicar como crear una aplicación básica en electrón pero creo que la documentación oficial es muy buena así que me delimitaré a dejar el enlace:

https://electronjs.org/docs/tutorial/first-app#installing-electron/

 

Por otra parte agregue el proyecto a un repositorio al cual le iré creando una etiqueta que apunte a cada uno de los siguientes posts, de momento esta la versión 0.1:

https://github.com/fitorec/calculadora-electron/tree/v0.1

 

¿Que sigue?

En el siguiente post vamos hablar sobre el uso de eventos en electron.js de tal forma que podamos cachar la acción de las teclas.

Por otra parte me gustaría que me dejarán en los comentarios que tema les gustaría que se tratara en las próximas sesiones.

Haciendo un deploy con Git para una webApp

En ocasiones los clientes FTP suelen ser lentos conforme nuestras estructuras de archivos se vuelven complejas, por otra parte suele ser algo incomodo para un desarrollador estar saliendoce de entorno de lineas de comandos (CLI) para realza esta tarea.

El siguiente POST describe un mecanismo simple para realizar esta tarea utilizando, Git y una conexión SSH de un servidor Linux.

Consideraciones:

  1. Se considera que el lector cuenta con conocimientos básicos de Git, así como del manejo del CLI en entornos *nix.
  2. También que ya se cuenta con algún repositorio que contiene tu aplicación web, en este caso la describo como si estuviera en una carpeta con nombre app.
  3. Se cuenta con una cuenta de acceso SSH para el usuario user_x, en el servidor my.server.
  4. Para referirme a la carpeta destino en el servidor usaré /full_path/htdocs/

Creando la carpeta del repositorio remoto

Para crear esto necesitamos realizar un clone local con la opción --bare, esto sería con la siguiente instrucción:

git clone --bare app app.git

Esto hace que Git clone el repositorio app la opción --bare crea un directorio simple(bare), esto significa que no contendrá los archivos del repositorio, en cambio  contendrá los metadatos que Git requiere para trabajar, sí observamos el contenido de la carpeta resultante (/app.git) tendrá una estructura similar a:

app.git/
	|-- HEAD
	|-- config
	|-- description
	|-- hooks
	|-- info
	|-- objects q q
	|-- packed-refs
	`-- refs

	4 directories, 4 files

Para mayor info ver: https://mirrors.edge.kernel.org/pub/software/scm/git/docs/git-init.html

🔗 Creando el gancho al recibir cambios.

Git tiene con un mecanismo de ganchos (hooks), estos son scripts que están enganchados a diversos eventos, de tal forma que ¡son disparados 🔫 cuando dicho evento sucede!.

Para ligar un script a un evento de Git basta con crear el archivo con el nombre adecuado en la carpeta de hooks, esta carpeta generalmente ya contiene algunos ejemplos como se muestra a continuación:

app.git/hooks/
	|-- applypatch-msg.sample
	|-- commit-msg.sample
	|-- fsmonitor-watchman.sample
	|-- post-update.sample
	|-- pre-applypatch.sample
	|-- pre-commit.sample
	|-- pre-push.sample
	|-- pre-rebase.sample
	|-- pre-receive.sample
	|-- prepare-commit-msg.sample
	`-- update.sample

	0 directories, 11 files

Vemos que el sistema nos creó 11 ejemplos los cuales si les quitamos el sub-fijo .sample y los hacemos ejecutable (chmod u+x) estarán ligados al evento descrito por su nombre.

Lamentablemente en este caso no creó el ejemplo para el evento post-recibir por lo cual lo tenemos que crear manualmente:

touch app.git/hooks/post-receive

Respecto al contenido agregamos el siguiente código el cual está basado del siguiente ejemplo:

#!/bin/bash
#Carpeta de mi respotorio git
GIT_DIR="/full_path/htdocs/app.git"
#Carpeta destino de mi aplicación web
DST_DIR="/full_path/htdocs/web-app"
BRANCH="master"

while read oldrev newrev ref
do
	# Revisa que el $ref sea igual al $BRANCH a observar
	if [[ $ref = refs/heads/$BRANCH ]];
	then
		echo "Referencia recibida $ref: ";
		echo "Deployando la rama ${BRANCH} En el servidor."
		git --work-tree=$DST_DIR --git-dir=$GIT_DIR checkout -f
	else
		echo "Referencia recibida $ref. No se hizo algo: ";
		echo "Solo la rama ${BRANCH} puede deployar el servidor."
	fi
done

Como podemos ver el script cuenta con algunas variables p.e. BRANCH que permite definir el brazo a observar por defecto master.

⬆ Subiendo el repositorio en el servidor:

Una vez agregado el hook ya tenemos el repositorio listo (app.git) para subirlo a nuestro servidor:

scp -rp app.git user_x@my.server:/full_path/htdocs/

Nota: Este proceso puede tardar varios minutos dependiendo del tamaño de tu proyecto y la velocidad de tu conexión.

Lo siguiente que tenemos que hacer será conectarse al servidor mediante SSH para darle los permisos de ejecución (para el usuario) al script del hook post-receive:

# Ingresamos
ssh user_x@my.server
# Al conectarnos por defecto nos conecta en nuestra carpeta htdocs
# Damos permisos solo al usuario (`u`) de ejecución (`+x`).
chmod u+x app.git/hooks/post-receive

🔗 Vincular el repositorio con el servidor remoto.

Los repositorios Git pueden tener uno o varias fuentes remotas, estas son básicamente lugares en donde se enviar el código(push) y donde se puede obtener(fetch/pull).

Forma 1 (Agregando nuevo remoto):

Si ya tienes el proyecto clonado previamente de algun servidor (p.e. github), lo recomendable seria agregar una nueva fuente remota p.e. webserver:

git remote add webserver \
ssh://user_x@my.server:/full_path/htdocs/app.git

Forma 2 (clonando el proyecto):

Puedes clonar el proyecto del servidor, en este caso la fuente remota de origen origin sera el servidor:

git clone 
ssh://user_x@my.server:/full_path/htdocs/app.git

Mayor info: https://git-scm.com/book/es/v2/Fundamentos-de-Git-Trabajar-con-Remotos

☑ Deployando mis cambios en el Servidor:

Para desplegar nuestros cambios, solo es necesario hacer un push en el remoto que apunte a nuestro servidor web (en este caso webserver ) sobre la rama master (o la que hayas elegido):

git commit -am 'Se hizo algún cambio....'
git push -u webserver master

¡¡¡Listo!!!

 

Archivos fuentes

El contenido de este post así como el código fuente del script esta disponible en un gist que hice en github.com:

https://gist.github.com/fitorec/b100aebff4df20890a53dc4e971a91c0

Siéntete con la libertad de hacer lo que gustes con él, si tienes alguna idea o algún cambio que quisieras aportar favor de dejármela en los comentarios =)

Instala Certificados SSL de Let’s Encrypt en WordPress

Hace un tiempo escribimos acerca de lo importante que es tener un Certificado SSL en nuestro sitio web, por lo que en este breve tutorial veremos como instalar un certificado de Let’s Encrypt utilizando nuestro CPanel y la configuración de WordPress para forzar la conexión HTTP a HTTPS.

Instalando el Certificado SSL de Let’s Encrypt (CPanel)

Ingresamos al Cpanel y seguimos los pasos que vemos en la siguiente captura:

[img src=»https://mundosica.com/wp-content/uploads/2018/03/01-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/01-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

  1. Vamos hasta el modulo de «Seguridad».
  2. Damos clic en «Let’s Encrypt»

 

En la siguiente pantalla lo primero que nos muestra es una lista de los dominios y subdominios en los que hemos instalado certificados, si es la primera vez que instalaremos un certificado esta lista estara en blanco, la siguiente lista es de los dominios y subdominios a los que podemos instalar un certificado, por lo que elegiremos el dominio en el cual queremos instalar y daremos clic en «Issue».

[img src=»https://mundosica.com/wp-content/uploads/2018/03/02-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/02-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Marcaremos todas las casillas para incluir Cpanel y subdominios en el certificado e instalamos

[img src=»https://mundosica.com/wp-content/uploads/2018/03/05-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/05-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

[img src=»https://mundosica.com/wp-content/uploads/2018/03/03-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/03-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Ahora en nuestro listado de dominios con certificados nos aparecerá el que acabamos de instalar, también podemos observar la fecha en que caduca el certificado (cada 3 meses), pero no hay de que preocuparse, los certificados Let’s Encrypt se renuevan automáticamente.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/04-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/04-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

Configurando WordPress HTTP a HTTPS

Toca dar una manita a muestro WordPress para forzar la conexión segura, para esto hay que modificar el archivo .htacces, eliminar todo el contenido mixto (imágenes, audios y todos los recursos con HTTP), lo podemos hacer manualmente o hacer uso de algún par de plugins.

En esta ocasión utilizaremos plugins, ya que algunos de nosotros no nos llevamos bien con el código, iniciemos:

El primer plugin a instalar es Really Simple SSL, nos permitira forzar la conexión segura tanto a visitantes del sitio (.htacces) como a administradores (wp-config.php)

[img src=»https://mundosica.com/wp-content/uploads/2018/03/06-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/06-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Una vez activo el plugin no tenemos que configurar nada, lo que si es recomendable es desactivar «Activar redirección Javascript a SSL» ubicada en Ajustes>SSL>Ajustes, esta opcion forza la conexión segura por javascript cuando no se pueden modificar los archivos .htacces y wp-config.php, por lo que si todo marcha bien no es necesario tener activada esa opcion, ya que ralentiza un poco al cargar javascript.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/07-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/07-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Ahora podemos comprobar que nuestro sitio cargue correctamente con HTTPS, basta con actualizar en nuestro navegador, si hasta aqui todo va correctamente podremos ver el tan aclamado candado verde junto a nuestra URL, pero aun falta por trabajar, si damos clic en dicho candado veremos una pequeña advertencia de nuestro por parte de nuestro navegador, o tal vez nos muestre un candado en amarillo, todo depende del navegador que estemos usando.

[vc_gallery type=»image_grid» images=»1201,1202″ img_size=»full» css_animation=»fadeIn»]

 

Esto es debido a todo el contenido mixto que aun tenemos en nuestro sitio, es decir imágenes, audios, vídeos, etc. Todo aquel recurso que hemos agregado manualmente y que el plugin anterior no pudo arreglar (si puede, pero esa opción es de paga), estos elementos regularmente conservan el HTTP, para cambiar a HTTPS tendriamos que ir entrada por entrada, o pagina, cambiando la URL de cada elemento, nunca acabaríamos por lo que nuestra mejor opción es hacerlo directamente desde la base de datos, lo sé, si no queremos meter mano al codigo menos a la base de datos, para eso esta Search & Replace, un plugin que nos permitira cambiar todas esas url’s en unos minutos.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/09-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/09-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Antes de empezar a trabajar con la base de datos, ya sea con phpMyAdmin o con un plugin, debes de hacer un respaldo por si algo no sale como queremos, Search & Replace nos permite hacer el respaldo desde WordPress, simplemente tenemos que seguir los siguientes paso:

  1. Ir a Herramientas
  2. Busca y reemplaza
  3. Dar clic en el botón Crear archivo SQL, esto genera un archivo SQL, el cual es el respaldo de nuesta base de datos.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/10-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/10-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Generalmente al momento de guardar el respaldo le agrego old_url al nombre del archivo para diferenciar entre el respaldo y el archivo con los cambios, quedando algo asi; mundosica_old_url.sql.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/11-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/11-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Viene lo mejor, cambiar la url de nuestro sitio de http://midominio.com a https://midominio.com esto eliminara el contenido mixto, esta opción la encontramos en la segunda pestaña «Busca y reemplaza» una vez ahí los pasos a seguir son:

  1. En «Buscar por» ingresamos nuestro dominio actual, con HTTP, http://midominio.com y en «Reemplazar con» con HTTPS, es decir https://midominio.com
  2. Elegimos todas las tablas, así nos aseguramos que el reemplazo de URL sea completo.
  3. Exportamos la base de datos en un archivo SQL, al archivo generado le agregamos new_url (mundosica_new_url.sql), para diferenciarla del respaldo guardado anteriormente.
    Si la base de datos es muy grande podemos usar la compresión GZ para agilizar la descarga.
  4. Finalmente damos clic en el botón «Buscar y reemplazar» para generar nuestro archivo y descargarlo.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/12-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/12-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

El paso final es reemplazar nuestra base de datos con la base con los cambios en la URL, para estos procedemos a:

  1. Damos clic en la tercer pestaña «Importar SQL«
  2. Clic en el boton «Examinar«, buscamos el archivo SQL o GZ que descargamos en el proceso anterior (mundosica_new_url.sql)
  3. Clic en «Importar archivo SQL«

[img src=»https://mundosica.com/wp-content/uploads/2018/03/13-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/13-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

El plugin nos indicara que el proceso fue satisfactorio, ahora tienes un sitio con un Certificado SSL funcional, sin advertencias o candados naranjas, ¡Felicidades!

La hora ideal para publicar contenidos en redes sociales

El otro día un cliente me preguntó ¿Cual es la hora ideal para publicar contenidos en redes sociales? Por mi parte le compartí información que había leido con anterioridad, la mayoría de sitios extranjeros, casualmente ahora me acabo de encontrar un estudio bastante interesante que les comparto «Estudio de Medios y Dispositivos entre internautas mexicanos» de autoría IAB México ( Interactive Advertising Bureau). Aquí dejo datos bastante genéricos pero que les permitirá tener un panorama bastante amplio para la toma de decisiones referente a sus contenidos digitales, sobre todo pensando en redes sociales.

horario cuando los internautas ponen más atencion a contenidos digitales

horario cuando los internautas ponen más atencion a contenidos digitales.

 

Leer más

Los 100 websites más visitados en México durante 2014

El presente post pretende responder a la pregunta ¿Cuales son los sitios 100 websites más visitados en México? No importa el origen del website lo importante es el volumen de visitas, Toda la información fue tomada de Alexa.com y en esta ocasión procuré hacer una comparación con un post que publiqué el año pasado.

Breve resumen:
Google.com.mx es el sitio más visitado y se mantiene en primer lugar en relación al año 2013, no así su competidor bing quien perdió posiciones pasando del lugar 31 al 45. Google mantiene su aplastante superioridad frente a sus competidores y conserva los lugares de yutube y google.com

Al parece a los mexicanos nos gustan las redes sociales ya que el segundo puesto lo mantiene Facebook a demás de las otras 6 redes sociales que aparecen entre los 100 sitios más visitados durante 2014. También śe incrementó el número de sitios de comercio electrónico seguido de los portales de noticias, comunidades web, Publicidad, instituciones financieras, buscadores, redes sociales, etc.

Se pueden sacar muchas conclusiones aquí algunas muy básicas.

*NetFlix perdió posiciones pero se mantiene como líder en video on demand

*Mercado Libre pierde posiciones pero sitios como Linio.com.mx pasó del lugar

* unam.mx gana 11 posiciones, un incremento bastante considerable

PayPal pierde posiciones pero aun se mantiene por encima de sites con servicios financieros como Banamex.com.mx

Aliexpress.com pasó del lugar 90 al 32 , sin duda los mexicanos ya no somos tan reacios a comprar en línea.

Organicé los 100 sitios en categorías muy básicas quedando de la siguiente forma:

Los 100 websites más visitados en México durante 2014

Leer más

Diseño web

Más allá de solo la presencia web es importante pensar en los objetivos que se desean conseguir con un web site. En algunos casos los clientes ya tienen website pero

¿su sitio se visualiza en dispositivos móviles?

¿Su sitio web solo se puede ver si tiene instalado flashplayer?

Muchos de los usuarios de dispositivos móviles no descargan flash solo para ver un solo sitio web. Nuestro trabajo es hacer fácil el de usted.

Desarrollando Plugins en Joomla 3.0, parte I

Esto es una serie de artículos donde tratare de explicar como desarrollar un plugin en Joomla 3, explicando como hacer un plugin que nos permita agregar información antes y después del contenido, así como modificarlo, el resultado de un articulo con dicho plugin activado es el siguiente:

Plugin Test Eventos

Resultado tras crear el plugin

Plugins en Joomla ¿Que diablos es un plugin?

Cabe mencionar que un plugin en Joomla es lo que antes eran conocidos como mambots en las primeras versiones de Joomla(cuando heredo de Mambo), menciono esto no por que sea un romántico de lo antaño, si no por que me parece mas fácil entender un plugin desde el concepto de un bot(robot o automata).

Dicho esto un Plugin en Joomla es una extensión que una vez activada dispara funcionalidades en determinados eventos.

Funcionamiento de un Plugin ¿como carajo me pueden servir?

Nos sirve para agregarle funcionalidad y personalizar el comportamiento de nuestro portal Joomla, usando plugins por ejemplo podemos:

  • Detectar y hacer algo en las autenticaciones fallidas.
  • Modificar los contenidos p.e. agregar botones de redes sociales, formularios, etc…
  • Realizar cierta acción cuando el usuario busque determinada información.
  • Enviar un correo electrónico de felicitación al usuario registrado núm 1000.
  • Realizar acciones del sistema como re-direccionamientos o manejo de errores.

Y muchas otras acciones más que pueden llegar a realizar nuestros sitios, solo es cuestión de enganchar el evento adecuado y un poco de imaginación.

Grupos de plugin ¿Como están divididos los plugins?

Cabe mencionar que los Plugins a su vez están divididos en grupos según su funcionalidad:

  • authentication
  • captcha
  • content
  • editors
  • extension
  • finder
  • search
  • system
  • user

Si observas la carpeta /plugins/ encontraras una subcarpeta para cada grupo ahí también encontraras una serie de plugins para cada grupo que te puede servir de ejemplo. Por cada grupo se definen una serie de eventos(disparados en funciones), en este manual voy a explicar el funcionamiento del grupo que corresponde a los contenidos (content).

Los eventos definidos en Content mas comunes son los siguientes:

onContentPrepare Modificando el contenido

Esta función es ejecutada antes de que el artículo se imprima en la pantalla. Si quiere modificar el contenido(ó el titulo) de alguna manera, este sería el mejor lugar para realizar estas modificaciones.

onContentBeforeDisplay Agregando texto previo al contenido

Esta función es disparada antes de que Joomla mande a imprimir el cuerpo de un contenido, aquí podemos devolver algun texto que queramos que se muestre en dicho espacio.

onContentAfterDisplay Agregando texto posterior al contenido

Esta función es disparada depues de que Joomla mande a imprimir el cuerpo de un contenido, aquí podemos devolver algún texto que queramos que se muestre en dicho espacio.

Haciendo nuestro primer plugin de Contenido Ejemplo con los eventos mas comunes

Vamos a desarollar un plugin del tipo contenido que nos sirva para probar los eventos que podemos usar(en realidad los mas comunes).

Definición del archivo instalador

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.0" type="plugin" group="content" method="upgrade">
    <name>Test Eventos de Plugins</name>
    <author>Fitorec</author>
    <creationDate>02-04-2013</creationDate>
    <authorEmail>programacion@mundosica.com</authorEmail>
    <license>GNU/GPL version 2 or later</license>
    <authorUrl>https://mundosica.com</authorUrl>
    <version>1.0</version>
    <description>
        Plugin de prueba que nos muestra un el funcionamiento de los eventos en un Plugin de Joomla!
    </description>
    <files>
        <filename plugin="TestPluginEventos">TestPluginEventos.php</filename>
        <filename>TestPluginEventos.xml</filename>
    </files>
</extension>

El archivo anterior define una extensión para la versión 3.0, del tipo Plugin, que pertenece al grupo Content.

También definimos el nombre que tendrá el plugin y mas datos como autor, descripción, etc..

Algo muy importante es que definimos que el plugin TestPluginEventos esta ubidado en el archivo TestPluginEventos.php.

Faltaría definir el archivo TestPluginEventos.php donde pondremos el Plugin en cuestión.

<?php
// Restringe el Acceso al archivo si no es desde el Entorno Joomla.
defined('_JEXEC') or die;

/**
 * Plugin test de Eventos.
 */

class plgContentTestPluginEventos extends JPlugin
{
    private $_titulo = '<h3 style="color: %s">%s</h3>';

/**
 * Constructor del objeto
 * 
 * @param object &$subject es una instancia del objeto a construir
 * @param array $config parámetro opcional arreglo asociativo: puede contener las claves
 *                      'name', 'group', 'params', 'language'
 */
    public function __construct(&$subject, $config)
    {
        parent::__construct($subject, $config);
    }//fin constructor

/**
 * Esta función es ejecutada antes de renderizar el articulo
 *
 * @param String $context es el contexto en el cual es ejecutada
 * @param Object $row es un objeto que contiene la información del articulo(como titulo, contenido, url, autor, etc)
 * @param Object $params es un objeto que contiene la información del portal y parametros del plugin
 * @param Integer $limitstart desplazamiento del elemento
 */
    public function onContentPrepare($context, &$row, &$params, $limitstart)
    {
        if($context == 'com_content.article')
            $row->text = '<p>Contenido modificado en el evento <b>onContentPrepare</b></p>' . $row->text;
    }//fin onContentPrepare

/**
 * Esta función es ejecutada antes de mostrar renderizar el cuerpo del articulo
 *
 * @param String $context es el contexto en el cual es ejecutada
 * @param Object $row es un objeto que contiene la información del articulo(como contenido, url, autor, etc)
 * @param Object $params es un objeto que contiene la información del portal y parametros del plugin
 * @param Integer $limitstart desplazamiento del elemento
 */
    public function onContentBeforeDisplay($context, &$row, &$params, $limitstart)
    {
        return sprintf($this->_titulo, '#FF4A00', 'Evento onContentBeforeDisplay');
    }//fin onContentBeforeDisplay

/**
 * Esta función es ejecutada después de mostrar renderizar el cuerpo del articulo
 *
 * @param String $context es el contexto en el cual es ejecutada
 * @param Object $row es un objeto que contiene la información del articulo(como contenido, url, autor, etc)
 * @param Object $params es un objeto que contiene la información del portal y parametros del plugin
 * @param Integer $limitstart desplazamiento del elemento
 */
    public function onContentAfterDisplay($context, &$row, &$params, $limitstart)
    {
            return sprintf($this->_titulo, '#1C9202', 'Evento onContentAfterDisplay');
    }//fin onContentAfterDisplay

}

Como podemos ver un Plugin de Joomla es un Objeto que hereda de JPlugin esta clase esta definida en /libraries/joomla/plugin/plugin.php.

Es importante mencionar que al nombre de la clase se le agrega el prefijo plgContent, ya que es un plugin (plg) del tipo Contenido(Content) quedando finalmente como plgContentTestPluginEventos, si no nombramos correctamente la clase, Joomla no podrá ejecutar el plugin.

Enlaces recomendados y conclusiones

Quizas te preguntes que pasaría si ¿2 plugins(ó extensiones) activados ocuparan el mismo evento?, pues lo que sucede es que Joomla detecta las funciones definidas para determinado evento y va generando una lista de ellas para que una vez que ocurra el evento las ejecute todas, esto lo hace basado en el un patrón conodicido como Observer a continuación presento el diagrama UML del comportamiento de este patrón.

patrón Osbrver

Comportamiento patrón Observer

Si gusta abundar por en el tema le sugiero seguir las siguientes ligas:

Descarga este Plugin y proximos posts

Descargar este plugin | Visualizar el código fuente en Linea

En el siguiente articulo me gustaría hacer un plugin de contenido, ya con alguna funcionalidad mas especifica se me ocurre agregar botones de redes sociales, ocupando parámetros en el plugin.

CSS Cursor hand (de links) cross-browser

En ocasiones queremos que cierto elemento en nuestras paginas tenga el cursor del tipo link, en CSS este es un Tip algo viejo pero a la vez útil, ya que desgraciadamente no todos los navegadores aceptan los mismos atributos.

CSS Algo de código

element {
	cursor: pointer;
	cursor: hand;
}

Para mayores informes y revisar la tabla de compatibilidad de los navegadores visitar: Cursor estilos

Animación de corazón CSS3 usando keyframe

En diciembre del año pasado aprendí esta técnica viendo el blog de Lea Verou en un contenido titulado «CSS Animations with only one keyframe«, la cual he usado para animar iconos realizados con tipografía(si te interesa esta técnica te recomiendo ver estas iconografias en fuentes), pero no me había dado tiempo de compartirla, y creo que la fecha se presta para esto, sin mas dejo el ejemplo:

Ver ejemplo funcionando

¿Como funciona? Breve explicación

Tratare de explicar el funcionamiento de esta animación aunque en trucos-CSS lo explican a mejor detalle. Lo primero que se hace es definir una animación la cual tiene la siguiente estructura CSS:

@keyframes latidos {
    from { transform: none; }
    50% { transform: scale(1.4); }
    to { transform: none; }
}

Aquí estamos definiendo una animación la cual tiene el nombre de latidos, esta la vamos a instanciar(fijar) en algún elemento de nuestro código CSS, como se muestra a continuación:

.corazon {
	display: inline-block;
	font-size: 150px;
	text-shadow: 0 0 10px #222,1px 1px  0 #450505;
	color: red;
	animation: latidos .5s infinite;
	transform-origin: center;
}

Con esto estamos indicando que la animación(latidos) definida previamente va a ser ejecutada cada 0.5 segundos en un ciclo infinito sobre los elementos que pertenezcan a la clase corazon.

Finalmente solo faltaría definir algún elemento HTML con la clase corazon como se muestra en el siguiente código HTML:

<div class="corazon">&#x2665;</div>

El código &#x2665; contenido dentro del div con la clase corazon es el carácter con el símbolo de un corazón (♥), el cual tendrá el estilo de la clase corazon y estará animado por la definición de latidos.

Bien, espero te sirva de algo! y asta luego.