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.

Fecha en formato bonito un plugin de jQuery corriendo en wordpress

Hace un par de años John Resig el autor de jQuery escribió un árticulo muy bonito donde anunciaba una pequeña función que imprimía el día en un formato mas humano al cual denomino pretty-date , la función básicamente es la siguiente:

/*  prettyDate
 * 
 * recibe una fecha en formato ISO8601
 * y devuelve la fecha en formato bonito
 */

function prettyDate(time){
	// Lo primero que hace es obtener la diferencia
	// de la fecha pasada con la fecha actual
	var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
	    diff = (((new Date()).getTime() - date.getTime()) / 1000),
	    day_diff = Math.floor(diff / 86400);

	//Si la diferencia es invalida, quiere decir que el argumento pasado por el
	// usuario es invalido por lo cual regresa null
	if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
		return;

 //Finalmente va atrapando el rango de los las diferencias para así devolver el resultado
	return day_diff == 0 && (
			diff < 60 && "just now" ||
			diff < 120 && "1 minute ago" ||
			diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
			diff < 7200 && "1 hour ago" ||
			diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
		day_diff == 1 && "Yesterday" ||
		day_diff < 7 && day_diff + " days ago" ||
		day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}

Posteriormente esta función se convirtió en un plugin de jQuery mantenido por jzaefferer (uno de los dev. del nucleo de jQuery). Pero… si analizamos detenidamente el código anterior del cual esta basado el  plugin nos daremos cuenta que  cuando la fechas rebasaba la semana el plugin truena, como se puede ver en el siguiente demo :S.

Este plugin lo empece a utilizar para la página de la Academia de Software Libre , sin mas me decidí a agregarle el soporte para meses y años, ademas de agregarle soporte para la lengua española (ver detalles de la confirmación), algunos de estos cambios están disponibles en la versión 1.1 disponible en el repositorio de jzaefferer sin embargo de momento la traducción completa esta disponible en mi repositorio (aunque quizás cuando lea esto mis cambios ya se hayan integrado).

Como usar este plugin es muy simple y personalizable

Una vez que obtengamos el plugin podemos usarlo de la siguiente manera:

<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.prettydate.js"></script>
    <script type="text/javascript" src="js/jquery.prettydate-es.js"></script>
    <script>
        jQuery(function ($) {
            $(".entryDate").prettyDate({attribute: "datetime"});
        });
    </script>
</head>
<body>
  <time datetime="2012-10-29T18:12:02+00:00" itemprop="dateCreated">
  </time>
</body>

Veamos lo primero que hacemos es cargar la librería jQuery, posteriormente el plugin (prettydate.js) y finalmente su traducción al español (jquery.prettydate-es.js ojo el orden importa).

Luego en el ready de jQuery mandamos a llamar a los elementos que pertenezcan a la clase .entryDate para aplicarles el plugin, al momento de mandarle el argumento {attribute: "datetime"} estamos indicando que el atributo a convertir sera el datetime, si no indicamos esto por defecto buscaría el atributo title

   $(".entryDate").prettyDate({attribute: "datetime"});

Hechando andar este plugin en WordPress

Bien lo primero que tenemos que hacer es mandar a llamar las librerias necesarias, por ejemplo deberíamos agregar en el header.php o footer.php de nuestra plantilla las siguientes lineas:

<?php
$rootPath = get_bloginfo('template_directory');
?>
<script src="<?php echo $rootPath; ?>js/jquery.js"></script>
<script src="<?php echo $rootPath; ?>js/jquery.prettydate/jquery.prettydate.js"></script>
<script src="<?php echo $rootPath; ?>js/jquery.prettydate/jquery.prettydate-es.js"></script>
<script language="Javascript"  type="text/javascript">
$(function() {
    $(".entry-date").prettyDate({attribute: "datetime"});
});
</script>

Una vez que tenemos esto estamos diciendo que le muestre la fecha en formato bonito a los elementos que pertenezcan a la clase entry-date y que a la vez tengan atributo datetime en formato ISO-8601 correcto, por lo cual faltaría generar dicha la salida desde nuestro tema de worpdress.

Finalmente en la cabecera del código de nuestro artículos agregamos el siguiente código en php:

<?php

printf( 
     '<a href="%1$s" title="%2$s" rel="bookmark">'.
     '<time itemprop="dateCreated" datetime="%3$s">%4$s</time></a>',
     get_bloginfo('url') . '/' . get_the_time('Y/m/d'),//Aqui la liga deberia de ir a los posts de ese día
     'Artículos del día ' . get_the_date(),
     get_the_time( 'c' ),
     get_the_date()
    );

Sólo como dato informativo la funcion

get_the_time

con el argumento ‘c’ regresa la fecha en formato ISO como lo indica en su API wordpress.
Quizás esto lo debería de meter en alguna función y agregarlo en su archivo function.php de la manera siguiente:

 if ( ! function_exists( 'mitema_pretty_date_post' ) ) :
function mitema_pretty_date_post() {
    // el código mostrado anteriormente
}
endif;

De esta forma solo bastaría con mandar a llamar la función para re-utilizarla, en el single.php o en el loop.php, content.php, etc… podría agregar:

mitema_pretty_date_post();

Contribución revisando comparación lógica en CakePHP::Shell

El cakephp es un framework que entre las cosas que nos brinda es una consola en la cual podemos construir: modelos, controladores, vistas, pruebas, ademas de contar con una serie de utilitarias.

 

¿Cual era el problema? si es que existía alguno

Por otra parte cakephp se caracteriza por ser un framework con una codificación muy clara, sin embargo de repente en el core hay código que es difícil de entender. Muchas veces como programadores hacemos una serie de proposiciones lógicamente correctas sin embargo las hacemos tan complejas que al momento de que terceras personas tratan de leerlas son algo difíciles de descifrarlas(por así decirlo) y esto con el tiempo llega a ser un problema ya que el único que entiende cierto código es quien lo escribió. Por tales razones siempre es bueno tratar de simplificar las expresiones lógicas de tal forma de hacerlas lo mas claras posibles.

Pero.. ¿por que comento todo esto? verán en concreto el  cakephp en su tiempo tuvo la siguente linea:

while ($in === '' || ($in !== '' && (!in_array(strtolower($in), $options) && !in_array(strtoupper($in), $options)) && !in_array($in, $options))) {

Tomate tu tiempo para analizarla y piensa que es lo que hace dicha linea, ¿es algo confusa verdad?.

Analizando posibles soluciones ¿como hacemos esto mas claro?

Bien veamos el código de otra forma, analizando la instrucción lógica siguiente:

(bool)($in === '' || 
        (
             $in !== '' 
           && (!in_array(strtolower($in), $options)
           && !in_array(strtoupper($in), $options)) 
           && !in_array($in, $options))
       );

Bien ahora analice la siguiente expresión lógica:

(bool)($in === '' || ($in !== '' && (otra_expr_logica) ));

Verán sí en la primera parte analizamos que $in es la cadena vacía ($in === '') entonces la segunda($in !== '' && (otra_expr_logica) ) parte ya no es analizada por PHP (por su comportamiento en corto circuito o perezoso).

Solución final

Bien teniendo esto en cuenta y aplicando algunas reglas lógicas podemos obtener una expresión un poco mas clara. Finalmente  la solución que se implemento es la que se muestra a continuación:

(bool) ($in === '' || 
            !(
                 in_array(strtolower($in), $options)
              || in_array(strtoupper($in), $options) 
              || in_array($in, $options)
        ));

Queda como tarea para el lector hacer su propio análisis lógico, para mayor información de la contribución consultar:

https://github.com/cakephp/cakephp/pull/411

Resolviendo un pequeño defecto en los comportamientos de CakePHP

Esta fue mi primera contribución en el frame de cakephp, en la cual me di cuenta de un bug, que existía en el modelo del nucleo.

El problema ¿que estaba pasando?

Tratare de explicar dicha contribución, verán hace un tiempo el cakephp en su modelo base tenia la siguiente instrucción en php:

if ($this->actsAs !== null || $this->actsAs !== false) {
 //...
}

Una prueba haciendo una pequeña prueba

Sí analizamos un poco nos daremos cuenta que es un análisis lógico incorrecto, por lo cual me puse en contacto con uno de los desarrolladores enviando el siguiente test:

function foo($actsAs){
    if ($actsAs !== null || $actsAs !== false) {
                echo "always runs!\n";
    }else
        var_dump($actsAs);
}

foo(false);
foo(null);
foo(
    array('Translate', 'MyBehavior' => array('setting1' => 'value1'))
);
foo('other mensaje');

Verán definí la función foo la cual es simplemente una función de prueba para testar la instrucción lógica de la forma: if ($this->actsAs !== null || $this->actsAs !== false), el resultado del script es el siguiente:

always runs!
always runs!
always runs!
always runs!

¿Como se resolvió? y ¿tu que solución darías?

Bien basicamente propuse las siguientes 3 soluciones:

1. Cambiar la estructura de la comparación lógica por la siguiente

    if ($this->actsAs !== null && $this->actsAs !== false)

2. Revisar si $this->actsAs no es vacio

    if (!empty($this->actsAs))

3.Eliminar la comparación y simplemente ejecutar la acción defecto

    $merge = array('findMethods','actsAs');
    /*if ($this->actsAs !== null || $this->actsAs !== false) {
            $merge[] = 'actsAs';
    }*/

 

¿Tu cual crees que es la mejor solución?, para mayor información sobre la solicitud de cambios puede ver los detalles en:

https://github.com/cakephp/cakephp/pull/357

 

P.d. Agradezco a la comunidad de cakePHP y en especial a Markstory por portarse tan amables con un novato que apenas hacia su 1ra confirmación.

Agil WordPress

Ágil wordpress es una copia de wordPress con soporte al español y con un conjunto de plugins que hacen de Ágil WordPress una instalación rápida, segura y eficiente.

 

Ágil WordPress

Ágil WordPress

Este es un proyecto que acabamos de crear el mismo día de la publicación de este post, la intensión es hacer publico el repositorio WordPress que utilizamos en mundosica.com para brindar servicios web, creemos que esta acción es un gesto ético hacia nuestros clientes ya que lo que solemos vender no es el software en sí, si no los servicios a su alrededor. De momento el proyecto no es mas que una simple copia canónica de WordPress. La razón es que creo que antes de empezar a publicar versiones, se deberán definir ciertas reglas de control de calidad que deberá tener el proyecto. Estas con la intensión que nos ayuden a tener un proyecto: realmente estable, fuerte, fácil de contribuir  y seguro:

Reglas para el control de calidad Esto puede ser una molestia pero con el tiempo nos ayudará

  • Los archivos en PHP deberán seguir el estilo de codificación propuesto por worpdress (El basado en PEAR)
  • Deberán ser examinados para garantizar que son óptimos y que no contengan código malicioso.
  • Los archivos en hoja de estilo deberán de seguir el estilo descrito por Mark Otto.
  • El framework en javascript sera jQuery no permitiendo sobre cargar otros framework con las mismas funcionalidades.
  • Los códigos en javaScript sólo ocuparan la version «actual estable» como única versión jQuery(No permitiendo cargar múltiples versiones de jQuery).
  • Cada plugin jQuery que se integre  deberá seguir el estilo que el nucleo de jQuery.

Liga del repositorio del proyecto:

https://github.com/mundoSICA/Agil-WordPress/

 

Generador de esquemas de microdatos para wordpress

El generador esquemas es un elemento que nos genera código HTML5 valido con microdatos. Los microdatos es meta información que permite describir de manera mas precisa el tipo de contenido de nuestras paginas de Internet.

Generador de esquemas de microdatos

Generador de esquemas de microdatos

En terminos de google:

La especificación HTML5 sobre microdatos es una forma de etiquetar contenido para describir un tipo específico de información (por ejemplo, opiniones, información sobre personas o eventos). Cada tipo de información describe un tipo de elemento específico como, por ejemplo, una persona, un evento o una opinión. Por ejemplo, un evento incluye las propiedades «venue», «starting time», «name» y «category».

Mayor Información de microdatos de google

Por otra parte google también proporciona una herramienta para validar/revisar los microdatos existentes en nuestras páginas (Bing cuenta con un servicio similar pero requiere estar logeado en bing webmaster).

Hace poco tuvimos que agregar algunos productos para un cliente y como requeríamos indexar esta información me vi tentado en modifcar un tema para wordpress sin embargo me encontré con la grata sorpresa de encontrar un plugin que es un generador de esquemas de microdatos Alguno de los esquemas que te genera son:

Desgraciadamente en el momento que conoci el plugin (version 1.031):

http://wordpress.org/extend/plugins/schema-creator/

No tenia soporte para la idioma español :(, por lo cual hice una copia del repositorio y le agregue soporte a múltiples idiomas.

Acabe de hacer una solicitud de cambios a uno de los desarrolladores referente hacia una confirmación que da soporte del plugin para multiples idiomas(con soporte en ingles/español por el momento). También se me ocurren otras ideas en la implementación de la estructura de las librerías en javaScript del plugin, que espero postear después.

Login personalizados con wordpress

En ocasiones nos gustaría cambiar ciertas cuestiones del estilo en la página de login de nuestro wordpress, por ejemplo a mi se me ocurrió cambiar el logotipo y enlace de la cabecera así como, mandar a llamar a otra hoja de estilo, la librería jQuery y un script.

Login personalizados de wordpress

Login personalizados de wordpress

Primero analizamos el código html con el que vamos a trabajar, el cual es el siguiente:

 

 <div id="login">
    <h1>
        <a href="http://es.wordpress.org/" title="Funciona gracias a WordPress">
            nombre de nuestro sitio
        </a>
    </h1>
    <form ... >
        <!-- contenido del formulario -->
    </form>
</div>

Mi intensión es cambiar tanto la referencia  `href` a la vez que el titulo `title` del enlace a la vez que cambiamos la imagen de fondo y agregamos una hoja de estilo que me modifique el diseño del login, atienda al siguiente código el cual deberá agregarse en las funciones ( function.php ) de nuestra plantilla:

 <?php
/*
Configurando el login
*/
function mi_login_personalizado() {
?>
<!-- Agregando twBootstrap -->
<link rel="stylesheet" type="text/css" media="all" href="<?php 
    echo get_bloginfo( 'template_directory' );
?>css/bootstrap.css" />
<!-- Modificando el estilo del login -->
<style type="text/css">
body.login div#login h1 a {
    height: 63px;
    padding-bottom: 0;
    background-image: url(<?php 
        echo get_bloginfo( 'template_directory' );
    ?>/images/login.jpg);
}
/* aquí modificamos mas estilos, necesarios */
</style>
<!-- Agregando libreria y script restante -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php
    echo get_bloginfo( 'template_directory' );
?>js/login.js"></script>
<?php }
add_action( 'login_enqueue_scripts', 'mi_login_personalizado' );

Lo que acabamos de hacer fue definir la función mi_login_personalizado y la ligamos a la pila de scripts que imprimirá worpdress en la cabecera, de esta forma lo primero que hace la funcion es agregar una hoja de estilo en este caso la hoja de estilo de twitter bootstrap, posteriormente le cambiamos el fondo al enlace que se encuentra dentro del titulo nivel 1, por una imagen con el nombre login.png ubicada en la carpeta images/ de nuestra plantilla, y finalmente cargamos la libreria de jQuery y un script con el nombre login.js ubicado en la carpeta js/ de nuestra plantilla.

La función de js/login.js va hacer la de cambiar tanto la referencia como el titulo del enlace, el script es muy simple y es el siguiente:

 jQuery(function() {
    $('#login').find('h1 a').attr({
        'title' : 'Regresar a mundosica.com',
        'href'  : 'https://mundosica.com'
    });
});

Finalmente accedemos a /wp-login.php y vemos el resultado de nuestros cambios :).

Pueden ver la referencia en la siguiente liga:

http://codex.wordpress.org/Customizing_the_Login_Form

¡Hola mundo!

Bienvenido a WordPress. Esta es tu primera entrada. Edítala o bórrala, ¡y comienza a publicar!.