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?

Haciendo un backtup en mysql

En ocasiones por alguna razón tenemos que mover los archivos de un servidor a otro, por ejemplo si deseas correr tus aplicaciones en tu localhost o por si alguna razón decides cambiar de provedor de hosting y ya que muchas de las aplicaciones que corren en la nube se basan en archivos de configuración lo ideal es que hagamos una migración trasparente, creando el usuario, la base de datos y andándoles los permisos adecuados.

Respaldando la Base de datos haciendo el backup

Lo primero que hay que hacer es respaldar la base de datos, para eso podemos ocupar el comando mysqldump la cual tiene la siguiente sintaxis:

mysqldump --user=<userName> --password=<password> <dbName> > dbBackup.sql

En este caso estamos haciendo un dump sobre la base de datos <dbName> y estamos enviando la salida en el archivo con el nombre dbBackup.sql, el cual podremos trasferir por ssh a nuestro otro servidor.

Creando el usuario y la Base de datos Dando permisos adecuados

Una vez conectados en nuestro, servidor donde vamos a migrar la base de datos, lo primero que hay que hacer es crear al usuario mysql y a asignar los permisos adecuados para esto debemos tener acceso al usuario root mysql y seguir las siguientes instrucciones:

Primero nos conectamos al entorno mysql:

mysql --user=root --password=<password_root>

Una vez conectados como root mysql:

CREATE USER '<userName>'@'localhost' IDENTIFIED BY '<password>';
CREATE DATABASE <dbName>;
GRANT ALL PRIVILEGES ON <dbName>.* TO '<userName>'@'localhost';
FLUSH PRIVILEGES;

Borrando usuario y base de datos en caso de conflicto

Espero que no pero quizás te equivoques al crear la base de datos y/o el usuario, de ser así lo que puedes hacer es borrar la base de datos y/o el usuario (para esto debes de estar conectado como root mysql):

DROP DATABASE IF EXISTS <dbName>;
DROP USER '<userName>'@'localhost';

Cargando respaldo haciendo el respaldo

Finalmente lo que tenemos que hacer es cargar la base de datos

mysql --user=<userName> --password=<password> <dbName> < dbBackup.sql

Error en caracteres latinos Esto en caso de error con caracteres latinos

En ocasiones puede crear problemas los caracteres latinos como la tilde entre otros(como la ñ), para esto a nuestro de respaldo(dbBackup.sql) le agregamos en la primera linea la siguiente instrucción.

/*!40101 SET NAMES utf8 */;

Finalmente deberíamos borrar la base de datos y volverla a crear(esto también conectado como root mysql).

DROP DATABASE <dbName>
CREATE DATABASE <dbName>;
GRANT ALL PRIVILEGES ON <dbName>.* TO '<userName>'@'localhost';
FLUSH PRIVILEGES;

Invitación para participar en 2º. Encuentro Estatal de Comunicación Indígena

Lugar: Claustro de la Parroquia de Zaachila, Oaxaca.
Fecha: Noviembre 30, 01 y 02 de diciembre de 2012.

OBJETIVO GENERAL:
Contribuir al desarrollo de la comunicación indígena mediante la articulación, el análisis y la reflexión con el fin de fortalecer la libre expresión, aplicando un enfoque especial a la equidad de género en contextos de la diversidad cultural, reformas jurídicas y el quehacer de los medios comunitarios, en el marco del diálogo intercultural entre los diversos actores de la sociedad.
PROGRAMA DE ACTIVIDADES:Lugar: Claustro de la Parroquia de Zaachila, Oaxaca.
Fecha: Noviembre 30, 01 y 02 de diciembre de 2012.

OBJETIVO GENERAL:
Contribuir al desarrollo de la comunicación indígena mediante la articulación, el análisis y la reflexión con el fin de fortalecer la libre expresión, aplicando un enfoque especial a la equidad de género en contextos de la diversidad cultural, reformas jurídicas y el quehacer de los medios comunitarios, en el marco del diálogo intercultural entre los diversos actores de la sociedad.
PROGRAMA DE ACTIVIDADES:

Lugar: Claustro de la Parroquia de Zaachila, Oaxaca.
Fecha: Noviembre 30, 01 y 02 de diciembre de 2012.

OBJETIVO GENERAL:
Contribuir al desarrollo de la comunicación indígena mediante la articulación, el análisis y la reflexión con el fin de fortalecer la libre expresión, aplicando un enfoque especial a la equidad de género en contextos de la diversidad cultural, reformas jurídicas y el quehacer de los medios comunitarios, en el marco del diálogo intercultural entre los diversos actores de la sociedad.
PROGRAMA DE ACTIVIDADES:

HORA
ACTIVIDAD
30 de Noviembre de 2012.
8:00 Hrs. Registro de Asistentes.
10:00 Hrs. Acto inaugural: Teatro Zaachila 600 años.
Ritual Indígena por la médico tradicional Yolanda Bautista.
Presentación de los integrantes de la mesa de presídium.
Palabras de bienvenida por el Maestro Adán López Santiago, Presidente Municipal de Zaachila, Oaxaca.
Palabras alusivas e inauguración del Encuentro por el Lic. Adelfo Regino Montes, Secretario de Asuntos Indígenas del Gobierno del Estado de Oaxaca.
Marco contextual del Segundo Encuentro Estatal de Comunicación Indígena por Sergio Julián, Coordinador General de Ojo de Agua.
11:00 Hrs.
PANEL 1: GÉNERO Y DEMOCRACIA EN LOS MEDIOS
Ponencia 1. “Democracia en medios y Pueblos Indígenas”: José Gil Olmos de la Revista Proceso.
Ponencia 2. “Perspectiva de Género en el contexto indígena” Martha Sánchez, Centro de Derechos Humanos Tlachinollan, Guerrero.
3. “La participación de las mujeres en los medios de Comunicación” Guadalupe Blanco del colectivo Radio Nandhia.
13:00 Hrs.
Laboratorio de Producciones Audiovisuales:
Video: Roberto Olivares.
Producción Radiofónica.
Internet y Nueva Tecnologías. Eymard Marcial www.mundosica.com
Periodismo Comunitario.
Fotografía y comunicación gráfica.
14:00 Hrs. Comida
15:00 Hrs. Continuación Laboratorio de Producciones Audiovisuales:
Video indígena.
Producción Radiofónica.
Internet y Nueva Tecnologías. Eymard Marcial www.mundosica.com
Periodismo Comunitario.
Fotografía y comunicación gráfica.
19:30 Hrs.Intercambio de saberes.
20:30 Hrs.Cena
21:30 Hrs. Evento Cultural.
Día 1º. de Diciembre de 2012.
8:00 Hrs. Desayuno
9:00 Hrs. Presentación: “Cumbre Continental de Comunicación Indígena del Abya Yala en Oaxaca”.
Braulio Vásquez y Genaro Bautista (Comité Estatal Pro Cumbre).
10:00 Hrs. Mesas de trabajo “Cumbre Continental de Comunicación Indígena del Abya Yala en Oaxaca”.
11:00 Hrs. Plenaria “Cumbre Continental de Comunicación Indígena del Abya Yala en Oaxaca”.
12:00 Hrs. Exposiciones paralelas:
Defensa de Territorio y patrimonio Natural.
Las Lenguas Originarias y su tratamiento en los medios de comunicación.
13:30 Hrs. Organización equipos de producción.
14:00 Hrs. Comida
15:00 Hrs. Laboratorio de Producciones Audiovisuales:
Video indígena.
Producción Radiofónica.
Internet y Nueva Tecnologías.
Periodismo Comunitario.
Fotografía y comunicación gráfica.
20:00 Hrs. Cena
21:00 Hrs. Proyección de Cine y Video Indígena.
Día 2 de Diciembre de 2012.
8:00 Hrs. Desayuno
9:00 Hrs.
PANEL: DERECHOS Y CULTURA INDÍGENA.
Ponencia 1 “El derecho a la comunicación en el marco de la reforma constitucional de Oaxaca en Materia indígena” Hugo Aguilar Ortiz Subsecretario de Derechos Indígenas de la Secretaría de Asuntos Indígenas.

Ponencia 2 “Los medios de comunicación ante el fortalecimiento de los elementos culturales identitarios”: Mardonio Carballo de Canal 22, Ciudad de México.
11:00 Hrs. Plenaria “Muestra de resultados del laboratorio de producciones audiovisuales”.
13:00 Hrs. Plenaria: “Lectura propuestas del encuentro y pronunciamientos adjuntos”.
14:00 Hrs. Clausura del Encuentro Estatal de Comunicación Indígena.
15:00 Hrs. Comida

Automatizando la validando sintaxis y estándar de codigo WordPress mediante el sistema de enganchaje de GIT

Hace poco escribí un post explicando como instalar CodeSniffer para validar estilo de codificación WordPress . Ahora me gustaría explicar como automatizar dicha validación mediante los puntos de enganche de sistema git.

 

Puntos de enganche Git Información previa

Git es un sistema de control de versiones que nos ofrece un sistema de  hooks el cual es un mecanismo que nos sirve para relacionar scripts de usuario que serán ejecutados en el momento que sucede algo relevante, los ganchos(hooks) básicamente se dividen en 2 tipos los que se ejecutan en el cliente los cuales están relacionados con operaciones como confirmación(commits), combinaciones(merge). El otro tipo son los que se ejecutan en el servidor estos están relacionados con cuestiones de recepción de confirmaciones(push).

Por ejemplo en nuestro servidor podríamos programar un script que cuando reciba una confirmación este genere un mensaje con la descripción de los cambios y lo envié por correo electrónico a un grupo de desarrolladores ó lo publique automáticamente en alguna pagina (como funcionan las contribuciones en el página del ADSL). Por otra parte en el cliente podríamos relacionar otro script que revise que nuestras contribuciones cumplan ciertas reglas, tratare de explicar este funcionamiento para esto observe el siguiente diagrama:

Diagrama gancho pre-commit del git
Diagrama gancho pre-commit del git

Como se puede ver podemos relacionar el hook pre-commit el cual se ejecuta antes de que la confirmación sea realizada, este gancho también es útil para preparar el mensaje de confirmación o para realizar pruebas.

Preparando el gacho pre-commit manos a la obra

Bueno para que un gancho sea ejecutado debe de existir un script que cumpla 2 cosas:

  1. Deberá tener el nombre y ubicación adecuada
  2. Deberá tener permisos de ejecución.

Los ganchos se encuentran ubicados en la carpeta .git/hooks/ estos son disparados en función de su nombre, en este caso deseamos definir el gancho pre-commit el cual deberá ser ejecutable, como se puede ver en las siguientes instrucciones:

# Creamos el archivo si no existe
touch .git/hooks/pre-commit

# Le damos permisos de ejecución
chmod +x .git/hooks/pre-commit

Agregando reglas de validación de wordpress Ocupando codeSninffer + git

Si bien con codeSninffer podemos validar nuestros archivos en PHP siempre es mas cómodo automatizar dicha validación, ademas que puede llegar a ser mas seguro ya que se en alguna ocasión se nos podría llegar a olvidar revisar determinado archivo y enviarlo por error.  Suponiendo que ya tenemos codeSninfer y el estándar de wordpress instalado ahora agregamos al archivo  .git/hooks/pre-commit el siguiente contenido:

 

#!/bin/bash
#
# Revisa el código cumpla simples reglas
# Mayor información: 
#

# Lista de colores a utilizar
Color_Off='\e[0m'       # Resetea el color
BRed='\e[1;31m'         # Rojo
BPurple='\e[1;35m'      # Morado
error=0;

# Revisa que el archivo no contenga espacios en blanco al final de las lineas
function revisar_espacios () {
	grep -qE '\s+$' $1
	if [ "$?" -eq "0" ]
	then
		let error=error+1
		echo -ne "${BRed}Error ${error}:${Color_Off}";
		echo -ne " ${BPurple}Espacios al final${Color_Off} -> ";
		grep -HnEo --color '\s+$' $1
	fi;
}

# Revisa que los archivos en PHP tengan sintaxis correcta.
function revisar_sintaxisPHP() {
	phpcs --standard=WordPress -s $1
}

# Concluye el script y muestra el numero de errores(si existen)
function salir_y_mostrar_errores() {
	if [ "$error" -ne "0" ]
	then
		echo -e "${BRed}Existen $error errores";
	fi;
	exit $error;
}

#################################################################################
# Apartir de la extensión vamos a validar los archivos por confirmar            #
#################################################################################
for archivo in $(git diff --cached --name-only)
do
	extension=$(basename $archivo | grep -Eo '\.[a-z0-9]+$' | sed 's/\.//g')
	case $extension in
		php)
			 revisar_espacios $archivo;
			 revisar_sintaxisPHP $archivo;
			 ;;
		js|json|sql|css|md|txt|html)
			 revisar_espacios $archivo;
			 ;;
	esac
done;

salir_y_mostrar_errores;

Puede descargar este código de:
https://gist.github.com/4123345

Saltándonos la validación

Quizás por alguna razón deseamos realizar determinada confirmación pero que no pase por la validación. Bien para hacer esto y si lo pensamos podríamos renombrar el archivo  pre-commit por pre-commit.sample(este nombre lo trae por defecto) o quitarle permisos de ejecución. Pero.. git ofrece una mejor alternativa que es realizar la confirmación sin verificaciones en la cual ni siquiera examina la existencia de hooks y mucho menos son ejecutados, veamos como se realiza esta:

git commit --no-verify

Instalando CodeSniffer para validar estilo de codificación WordPress

En ocasiones cuando se desarrolla código en equipo o se desarrolla determinado código que se va a compartir, este debe de cumplir ciertas reglas que ayudan a la comunidad ha seguir una buena calidad y claridad de código.

Quizás uno de los mayores problemas de PHP es su flexibilidad ya que a diferencia de lenguajes como Python ó Ruby no define reglas de estilo de codificación en su sintaxis. Por otra parte si bien las nuevas versiones de PHP(la versiones 5 y 6) tienen gran soporte para programación orientada a objetos y programación funcional  tampoco define un tipo de programación en especifico. Al final de cuentas se termina cargando la responsabilidad de la definición de estas reglas a las comunidades PHPeras las cuales en ocasiones hacen caso omiso de dicha responsabilidad y terminan siendo todo un caos su código y con el tiempo el deterioro de sus proyectos. Desgraciadamente por unos pocos se suele generalizar a los desarrolladores PHP como malos.

Critica a php

Critica a php

PHP CodeSniffer al rescate No todo esta perdido

Pero no todo esta perdido, entre las paquetes que nos ofrece PEAR esta uno que en especial me gusta mucho y que suelo ocuparar el cual se denomina php code sninfer . El cual como su nombre nos dice «espía nuestro código en php» para determinar si cumple con determinadas reglas de estilos.

 

Instalando code Sninfer en linuxprobado en trisquel y ubuntu

Para instalar codeSninfer solo requeres dpear install PHP_CodeSniffere ejecutar las siguientes instrucciones siendo usuario privilegiado(root):

#Instalamos pear esto sólo en caso de no existir
aptitude install -y php-pear

#Mediante PEAR instalamos PHPcodeSninfer y todas sus dependencias
pear install --alldeps PHP_CodeSniffer

Listo eso es todo!. Los estilos que nos instala por defecto son los siguientes:

├── Generic
├── MySource
├── PEAR
├── PHPCS
├── PSR1
├── PSR2
├── Squiz
└── Zend

Agregando estilo de codificación en wordpress

WordPress es una de las comunidades PHP más maduras con mas de 58,024,602 sitios instalados con dicha plataforma y miles de programadores contribuyendo todos los días, por lo cual requieren de reglas para llevar un mejor control y calidad en dichas contribuciones. Por lo cual worpdress definieron su propio estándar de estilo de codificación  del cual se deriva un estándar definido en codeSninfer, veamos como instalarlo(de igual forma requires ser usuario root).

git clone git://github.com/mrchrisadams/WordPress-Coding-Standards.git \
$(pear config-get php_dir)/PHP/CodeSniffer/Standards/WordPress

Probando que todo funcione

Finalmente solo basta probar que dicho estilo funcione, imaginemos que queremos revisar que el archivo loop.php cumpla con las reglas de codificacion de worpdress, esto lo podemos hacer con el siguiente comando(este se ejecuta como usuario normal).

phpcs --standard=WordPress -s loop.php

También podemos revisar algún directorio de forma re-cursiva mire el siguiente ejemplo:

phpcs -p -s -v --standard=WordPress /ruta/proyecto_wp/plugin_x/

En ambos casos estamos especificando explícitamente el estándar a utilizar. sin embargo podemos definir el estándar de worpdress por defecto, de la siguiente forma:

phpcs --config-set default_standard WordPress

Y posteriormente podemos omitir el argumento del estándar ya que es el que se configuro por defecto:

phpcs -s loop.php

Agregando y Eliminando rama remota con git

En ocasiones puede ser útil compartir una rama temporal en nuestro repositorio, por ejemplo imaginemos que por alguna razón tenemos que compartir algún brazo de prueba, el cual sera una copia del master pero con algunos pequeños cambios:

# Agregamos un nuevo brazo y nos brincamos a el al mismo tiempo
git checkout -b brazo-prueba
# Editamos algunos archivos
vim algun_archivo_test.php
# Agregamos nuestra confirmación respectiva.
git commit -am 'Haciendo nuestras pruebas'
# Compartiendo nuestra rama brazo-prueba
git push -u origin brazo-prueba

Una vez que compartimos nuestra prueba, podemos quizás hacer una combinación hacia nuestra rama maestra (ó alguna otra organización en nuestro repositorio), en fin el caso es que si por alguna razón la rama brazo-prueba ya no es necesaria la podemos eliminar del repositorio remoto de la siguiente manera:

git push origin --delete brazo-prueba

Conocer la lista de los archivos modificados en confirmaciones previas con git

En ocasiones necesitamos saber cuales son los archivos modificados en nuestras confirmaciones realizadas con git. ¿No se?, se me ocurre por ejemplo si deseo obtener esta lista para saber que archivos tengo que revisar ó cuales tengo que actualizar en algún servidor por poner algunos ejemplos.

Lista de archivos modificados en n confirmaciones previas El ejemplo mas simple

Por ejemplo si el día de hoy realice 3 confirmaciones, al final del día me gustaría obtener la lista del total de archivos modificados. Esto lo podemos hacer con el comando git-log, veamos este ejemplo:

# Archivos modificados hace 3 confirmaciones.
 git log -3 --name-only --pretty=format:''

Esto lo podemos ocupar para n confirmaciones previas, si sustituimos el -3 por el número de confirmaciones de las que interesan obtener la lista de sus archivos.

Lista de archivos modificados un un intervalo de tiempo definiendo un limite en tiempo

Quizás no recordemos exactamente cuantas confirmaciones hemos realizado un algun tiempo determinado, por ejemplo ¿que pasaría si nos interesa obtener es la lista de los archivos modificados hace 3 semanas al día de hoy?, no podríamos obtener esta lista con la instrucción anterior(ya que de momento no sabemos cuantas confirmaciones se han realizado).

Nos podemos ver tentados en realizar alguna búsqueda con el comando find partiendo de las fechas de modificación(ocupando el parámetro -mtime) de los archivos de nuestro repositorio, lo cual seguramente nos mostrara archivos propios del git que han sido modificados.

Por otra parte el  git-log nos proporciona parámetros(--before, --after, --since… ) para visualizar la bitacola en función del tiempo, veamos como seria esto con algunos ejemplos:

# Buscando archivos modificados hace 3 semanas(21 días) con el comando find
# Ojo: esta opción se requeriría filtrar para quitar los archivos del git
 find .  -mtime -21 -print 

# Archivos modificados después de hace 3 semanas, hasta antes al día de hoy :
 git log --before={today} --after={3.weeks.ago} --name-only --pretty=format:''

# Archivos modificados después de hace 2 días, hasta este momento :
 git log --before={now} --after={2.days.ago} --name-only --pretty=format:''

# Archivos modificados después de hace 2 días, hasta este momento
# Notar que es lo mismo que el ejemplo anterior sólo que son la opción "--since" :
 git log --since={2.weeks.ago} --name-only --pretty=format:'' | sort -u

Filtrando la lista poniéndonos creativos

En la lista puede que algunos archivos se repitan mas de una vez(ya que quizás fue modificado en varias confirmaciones),para esto una solución podría ser filtrar la lista para asegurar que los archivos no se repitan, para esto podemos ocupar el comando sort con la opción de único (-u esto con una tubería |), veamos como seria este filtro:

# Archivos modificados después de hace 3 semanas, hasta antes al día de hoy
git log --since={1.year.ago} --name-only --pretty=format:'' \
| sort -u

O quizás nos interesa obtener solo la lista de los archivos con alguna extensión(es), por ejemplo si nos interesa saber que archivos he modificado hace 3 semanas y que tienen la extensión php, css ó js. Para esto podemos hacer un filtro un poco mas detallado con el comando grep:

# Archivos modificados desde de hace 3 semanas y que ademas
# cumple que son archivos con la extensión: .php, .css ó js :
git log --since={3.weeks.ago} --name-only --pretty=format:'' \
| sort -u | grep -E '\.(php|css|js)$'

En general nos podemos poner mas curiosos de acuerdo a nuestras necesidades.

Mayor información:

Contribuciónes al plugin de jQuery prettyDay

Hace un tiempo en un post anterior había comentado a cerca de un plugin de jQuery que muestra la fecha bonita y de como echarlo andar en wordpress.

El «detalle» del post es que para que tuviera soporte completo para la lengua española los invitaba a descargar el plugin desde mi «versión« ya que de momento se encontraba abierto  un ticket de cambios propuestos(un pull request).

Pues bien hace un par de días dicho cambio ya fue agregado, ahora para que tengas soporte completo en la lengua española + soporte de meses y años, no se requiere de otra cosa mas que seguir la documentación oficial del plugin.

O descargar el plugin desde el repositorio principal(ya no del mío) y jugar con el demo:

https://github.com/jzaefferer/jquery-prettydate/pull/12

Me encanta esto del git y el github clonar repositorios jugar con ellos como si fuesen recetas de cocina, mismas recetas que «heackeamos» para compartir y de repente cuando te das cuenta  estas discutiendo con ciertos chefs que te alientan a ser mas exigentes con uno mismo cada día.

Barra separadora HR con puro CSS3

En ocasiones es necesario agregar alguna linea separadora, por ejemplo para separar los artículos ó los párrafos de algún contenido, para definir el estilo a estas barras existen distintas técnicas. Sin embargo hace poco vi algunas en CSS tricks que me gustaron:

Ejemplos HR con solo CSS en la página de CSS-Tricks

Ejemplos HR con solo CSS en la página de CSS-Tricks

Me gusto el hecho que solo requieren de puro Código CSS y con el HTML solo le damos estilo a dicha separadores, haciendo con esto una implementación bastante eficiente.

Especialmente me gusto la propuesta de Tomas Theunissen (el estilo con las borde redondos) y también me gusto el estilo de Harry Roberts (el que tiene el simbolo § en el centro).

 

Haciendo una combinación El diseño web es como recetas de cocinas puedes combinarnas y con esto obtener nuevas recetas

Vamos hacer una barra híbrida entre ambos estilos propuestos, como se muestra a continuación:


Para conseguir esto es necesario re-utilizar el código CSS y generar el siguiente:

/* Vamos a definir una barra separadora con el estilo de propuesto
 * por: Tomas Theunissen combinado con el de Harry Roberts 
 * 
 * Para mayor información: http://css-tricks.com/examples/hrs/
 * */ 
hr.separador_post { 
 height: 30px;
 border-style: solid;
 border-color: #BFBFBF;
 border-width: 2px 0 0 0;
 border-radius: 20px;
 text-align: center;
}

hr.separador_post:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    -webkit-border-radius:20px;
       -moz-border-radius:20px;
            border-radius:20px;
}

hr.separador_post:after {
    content: '★';
    color: #DC5500;
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

El código anterior define la clase separador_post, el cual tiene bordes redondos al cual le agregue como símbolo una estrella de color anaranjada. Ahora solo faltaría agregar el siguiente código Html para usarla:

<hr class='separador_post'/>

Resaltando textos seleccionados con Fokus.js en nuestros sitios web

El  Fokus es un proyecto en javascript que básicamente nos sirve para resaltar el texto seleccionado en un sitio, ayudando ha hacer una navegación mas explicita:

Probando Fokus

Probando Fokus

Si desea obtener mas información pude consultar el sitio oficial del proyecto:

http://lab.hakim.se/fokus/
Ó consultar directamente el repositorio de código fuente:
https://github.com/hakimel/fokus

Usando fokus corriendo fokus en nuestras páginas web

Para usar fokus primero tenemos que descargar la librería y posteriormente agregarla en nuestro sitio web que queremos que tenga el efecto fokus, p.e.:

<script type="text/javascript" src="js/fokus.js"></script>

Una vez que hicimos esto lo único que nos hace falta es probar con seleccionar algún texto sobre la página en cuestión.