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.

Calendario joomla

Agregando el Calendario de Joomla a nuestras campos de formularios

En ocasiones requerimos en nuestros sitios datos insertados por los usuarios, afortunadamente Joomla! cuenta con una serie de elementos que hacen mas amena esta tarea, el día de hoy quiero explicar como insertar el calendario de Joomla! tal y como lo vemos en la parte administrativa en las opciones de publicación al editar un articulo.

Calendario joomla

Calendario joomla

Bueno como indique Joomla! cuenta con un calendario el cual es el «The New Coolest DHTML Calendar» como lo pueden ver en el archivo ubicado en: JOOMLA/media/system/js/calendar-uncompressed.js.

Agregando el calendario a un modulo Manos a la obra

Para explicar como agregar el calendario voy a crear un simple modulo, si el lector no esta familiazidado con esto le suguiero revisar el articulo creando un simple modulo para que se contextualice(aunque tratare de explicar a detalle cada parte del modulo que vamos a crear). Este modulo es solo para fines de muestra por lo cual su funcionamiento es casi nulo, los archivos que los conforman son los siguientes:

 .
├── mod_example_calendar.php     <-- Este es el modulo
├── mod_example_calendar.xml     <-- Archivo de la declaración del modulo
└── tmpl
    └── default.php              <-- Vista por defecto del modulo

Bueno el archivo mod_example_calendar.xml esta conformado por la declaración del modulo, este archivo es usado en el momento en el que instalamos el modulo desde el manejador de extensiones, también aquí se declaran los archivos que utiliza, los archivos de traducción, también contiene información acerca la versión y del desarrollador.

El archivo mod_example_calendar.php es el modulo en sí, es lo que visualizamos, sin embargo aquí se suele agregar lógica de pre-procesamiento y por lo general se suele apoyar de Helpers ó ayudantes(el cual no es el caso ya que es un modulo muy simple), veamos el código que contendrá nuestro modulo:

 <?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_example_calendar
 *
 * @copyright   Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

require JModuleHelper::getLayoutPath('mod_example_calendar', $params->get('layout', 'default'));

No hay mucho que explicar en dicho código solo que la linea defined('_JEXEC') or die; nos indica que para que se pueda ejecutar el archivo se deberá mandar a llamar desde el entorno de ejecución de Joomla! (_JEXEC) y en caso contrario el script detiene su ejecución(se muere die).

La siguiente linea require JModuleHelper::getLayoutPath('mod_example_calendar', $params->get('layout', 'default')); nos indica que va a mandar a cargar una vista por defecto(el default layout).

Finalmente hemos llegado a la parte mas interesante de la explicación, la cual corresponde al archivo vista por defecto el archivo ubicado en /tmpl/default.php. Lo primero que hacemos es mandar a cargar todo lo necesario para la ejecución del calendario:

// Agregamos el calendario
JHTML::_('behavior.calendar');

Ahora imaginemos que tenemos un formulario con el siguiente código HTML :

<input id="mod-ex-cal" type="text" name="fecha" tabindex="1" size="18" placeholder="Fecha" />
<a href="#" id='mod-ex-cal-ctrl' title="Inserte la fecha">Insertar fecha</a>

Lo queremos es que el calendario funcione sobre el input con con ID mod-ex-cal  y que el enlace que dice «Insertar fecha» sea el control que dispare el calendario (el que tiene un ID mod-ex-cal-ctrl), veamos como se hace esto:

//En el domready mandamos a viculamos el evento del click del calendario
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration('window.addEvent(\'domready\', function() {Calendar.setup({
     inputField     :    "mod-ex-cal",        // ID del input en donde vamos a instanciar el calendario
     ifFormat       :    "%Y-%m-%d",          // Formato de la Fecha
     button         :    "mod-ex-cal-ctrl",   // ID del control el cual dispara el calendario
     align          :    "Tr",                // Alineación (Top right - Esquina superior Derecha)
     singleClick    :    true
});});'
);

descargar código fuente del ejemplo | Visualizar el código fuente en Linea

Fuentes de referencia: ¿De donde me base?