aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace unos minutos he publicado una entrada sobre los ShortCodes y la importante labor que pueden llegar a desempeñar en nuestros WordPress. Usando la API de ShortCodes he montado un pequeño script basado en execPHP que permite ejecutar PHP en nuestros posts mediante un sencillo shortcode.

Código

function eval_php($atts, $content=null) {
        ob_start();
        eval($content);
        $output = ob_get_contents();
        ob_end_clean();
        return "Entro".$output;
}

add_shortcode("php", "eval_php");
// Forzamos el do_shortcode al principio
add_filter('the_content', 'do_shortcode', 1);

Modo de empleo

[php]Código PHP[/php]

Sin los tags de php <?php ni ?>.

Ejemplo

[php]
	$str = "Hello {xx}";
	echo str_replace('{xx}', 'World!', $str);
[/php]

¿Donde pongo este código?

Puedes ponerlo en el fichero functions.php de tu theme o crear un plugin con el código.

¿Precauciones?

Hay que pensar que se está ejecutando código PHP desde los posts, si no eres el único usuario que postea debes tener esto en cuenta y quizas modificar el script. He montado 2 ejemplos para los más vagos

1. Limitando por ID de usuario

// ID's de usuarios permitidos
$users_avail = array(1,2,3,4);

function noPHP($data = null){
	global $current_user, $users_avail;
  	 get_currentuserinfo();

	if (in_array($current_user->ID, $users_avail)) return $data;
	$data["post_content"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content"]));
	$data["post_content_filtered"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content_filtered"]));
	return $data;
}

add_filter('wp_insert_post_data', 'noPHP');

function eval_php($atts, $content=null) {
	ob_start();
	eval($content);
	$output = ob_get_contents();
	ob_end_clean();
	return $output;
}

add_shortcode("php", "eval_php");

// Forzamos el do_shortcode al principio
add_filter('the_content', 'do_shortcode', 1);

2. Limitando por level mínimo

// Level mínimo
$minlevel = 5;

function noPHP($data = null){
	global $current_user, $minlevel;
      get_currentuserinfo();

	if ($current_user->user_level > $minlevel)
		return $data;

	$data["post_content"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content"]));
	$data["post_content_filtered"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content_filtered"]));
	return $data;
}

add_filter('wp_insert_post_data', 'noPHP');

function eval_php($atts, $content=null) {
	ob_start();
	eval($content);
	$output = ob_get_contents();
	ob_end_clean();
	return $output;
}

add_shortcode("php", "eval_php");

// Forzamos el do_shortcode al principio
add_filter('the_content', 'do_shortcode', 1);

Así y todo yo tendría cuidado con esto ya que mediante la ejecución de PHP en los posts, los autores, editores, … pueden hacer desastres de magnitudes impredecibles…

Limitaciones

No he podido hacer muchas pruebas, así que es posible que surjan errores y quizas haya limitaciones en el código que ponemos, podríamos comentarlas.

Una de las novedades con las que WordPress 2.5 nos sorprendía era con la aparición de ShortCodes. Un sistema que nos permitía definir pseudo-tags que nos permitía ejecutar PHP en nuestros posts. Como vimos hace unos meses (casi un año) este sistema nos permite definir tags al estilo BBcode que puedan ser usados en nuestros posts, siendo estos reemplazados por el código generado asociado a él.

¿Como funcionan?

Es muy sencillo, únicamente tendremos que definir nuestros propios shortcodes, abajo veremos algunos de ejemplos y los colocaremos en el fichero functions.php de nuestro theme o un un plugin destinado únicamente para ello. Allí, usando add_shortcode() iremos relacionándolos con las funcionalidades que deseemos realizar con cada uno de ellos.

Despues, una vez añadidos a WordPress, únicamente tendremos que escribir nuestro shortcode entre corchetes ([shortcode]) dentro de nuestro post y automáticamente al salir el post por pantalla este reemplazará nuestro shortcode por su equivaléncia en código.

La gente de Smashing Magazine hace una recopilación de algunos interesantes:

Última imagen asociada a un post:

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));
	$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
	foreach( $images as $imageID => $imagePost )
	$fullimage = wp_get_attachment_image($imageID, $size, false);
	$imagedata = wp_get_attachment_image_src($imageID, $size, false);
	$width = ($imagedata[1]+2);
	$height = ($imagedata[2]+2);
	return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

Modo de uso:

[postimage size="" float="left"]

Obtener los posts de una categoría desde un shortcode

function sc_liste($atts, $content = null) {
        extract(shortcode_atts(array(
                "num" => '5',
                "cat" => ''
        ), $atts));
        global $post;
        $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
        $retour='<ul>';
        foreach($myposts as $post) :
                setup_postdata($post);
             $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
        endforeach;
        $retour.='</ul> ';
        return $retour;
}
add_shortcode("list", "sc_liste");

Modo de uso:

[liste num="3" cat="1"]

Insertar un lector de RSS en tus posts

//This file is needed to be able to use the wp_rss() function.
include_once(ABSPATH.WPINC.'/rss.php');

function readRss($atts) {
    extract(shortcode_atts(array(
	"feed" => 'http://',
      "num" => '1',
    ), $atts));

    return wp_rss($feed, $num);
}

add_shortcode('rss', 'readRss');

Modo de uso:

[rss feed="http://www.anieto2k.com/feed/" num="5"]

Ajaxian nos alegra esta mañana anunciando que el iphone será el primer dispositivo móvil que dispondrá de algunas de las maravillas del HTML5 en su navegador web.

Almacenamiento DOM

Concretamente, la versión 2.1 del nuevo iPhone dispondrá de una base de datos para almacenamiento DOM de nuestras aplicaciones.

try {
    if (!window.openDatabase) {
        alert('not supported');
    } else {
        var shortName = 'mydatabase';
        var version = '1.0';
        var displayName = 'My Important Database';
        var maxSize = 65536; // in bytes
        var mydb = openDatabase(shortName, version, displayName, maxSize);

 	// Creamos las tablas
 	createTables(mydb);

 	// Ejecutamos UPDATE
 	updateRow('jdoe', 'fuschia');
    }
} catch(e) {
    // Error handling code goes here.
    if (e == INVALID_STATE_ERR) {
        // Version number mismatch.
        alert("Invalid database version.");
    } else {
        alert("Unknown error "+e+".");
    }
    return;
}

function createTables(db)
{
    db.transaction(
        function (transaction) {

            /* CREAMOS LA TABLA SI NO EXISTE . */
            transaction.executeSql('CREATE TABLE people(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL DEFAULT "John Doe", shirt TEXT NOT NULL DEFAULT "Purple");', [], nullDataHandler, errorHandler);

            /* AÑADIMOS DATOS. */
            transaction.executeSql('insert into people (name, shirt) VALUES ("Joe", "Green");', [], nullDataHandler, errorHandler);
            transaction.executeSql('insert into people (name, shirt) VALUES ("Mark", "Blue");', [], nullDataHandler, errorHandler);
            transaction.executeSql('insert into people (name, shirt) VALUES ("Phil", "Orange");', [], nullDataHandler, errorHandler);
            transaction.executeSql('insert into people (name, shirt) VALUES ("jdoe", "Purple");', [], nullDataHandler, errorHandler);
        }
    );
}

function updateRow(name, shirt) {
	db.transaction(
    function (transaction) {
        transaction.executeSql("UPDATE people set shirt=? where name=?;",
            [ shirt, name ]); // array of values for the ? placeholders
    }
	);
}

Disponemos de una documentación bastante detallada que nos permitirá hacer uso de esta fantástica propiedad.

Caché HTML5 de Aplicaciones

Cuando seleccionemos guardar nuestra aplicación en el Home Screen, esta automáticamente se guardará en caché, siempre y cuando lo especifiquemos mediante el tipo MIME correspondiente. Una forma de hacer más rápidas las aplicaciones para los clientes.

Esta capacidad será exclusiva de Safari Mobile y no aparecerá en ninguna otra versión de WebKit.

Esta la fecha en la que podría producirse un segundo efecto 2000, pero esta vez en equipos linux. Recordemos que hace ya 8 años, el mundo temblaba por que el efecto 2000 podría colapsar la informática del momento, esto era debido a que la mayoría de aplicaciones usaban un sistema de dos dígitos para contabilizar los años, esto hacía que despues del año 99 (1999) pasaríamos al 00 (1900), algo que podría desestabilizar algunas aplicaciones.

Ahora parece que puede ocurrir algo parecido con los equipos Unix. El problema viene por el sistema de 32 bits usados para para almacenar la fecha. Recordemos que el binario es un código  de 0 y 1 que representan los valores de true/false que puede reprensetar un bit, por lo tanto 32 bits serían una relación de 32 digitos que podrían ser 0 o 1.

Partiendo de que la primera fecha usada para el famoso timestamp de UNIX (POSIX) fué el 1 de Enero de 1970 a las 12:00:00 AM siendo en binario de 32 bits:

// 01-01-1970 12:00:00 AM
00000000 00000000 00000000 00000000

Rellenando todos los bits siguiendo las normas del código binario llegamos al 19 de Enero de 2038 a las 03:14:07 AM que se representaría en binario de 32 bits de la siguiente forma:

// 19-01-2038 03:14:07 AM
11111111 11111111 11111111 11111111

Por lo tanto, si queremos ir al siguiente bit nos vamos al :

// 10000000 00000000 00000000 00000000

Esto producirá que programas y sistemas operativos detecten que están en 1901 o 1970 (dependiendo de la implementación) en lugar del 2038. Y teniendo en cuenta que la mayoría de aplicaciones desarrolladas en lenguajes como C se verán afectadas, la cosa podría llegar a ser muy, pero que muy delicada.

Ejemplo gráfico

Imagen obtenida de Wikipedia.

Solución

Por desgracia, para estos equipos actuales basados en arquitectura 32 bits la cosa está complicada. Pero con la llegada de los 64 bits este problema será cosa para el futuro, muy al futuro, concretamente para el Domingo, 4 de Diciembre del año 292,277,026,596. Incluso en los nuevos equipos que irán apareciendo de 128bits darán lugar a fechas algo más lejanas, más exáctamente el mismo día 4 de Diciembre del año 170,141,183,460,469,231,731,687,303,715,884,105,727 de nuestra era.

Por suerte aún nos queda tiempo para ir actualizando nuestros equipos y viendo como avanza la tecnología esto parece remotamente improbable se convierta en un problema, pero por si acaso, estamos avisados.

Antes de comenzar a explicarme, he de decir que no siempre se cumplen todas las premisas para poder hacer las cosas como toca, a veces, el tiempo, las presión o simplemente el desconocimiento nos obliga a usar técnicas que funcionan, pero que podrían ser mejorables.

Detección del navegador

Hace unos días vimos unas opciones para detectar el navegador de nuestros usuarios mediante unas mínimas expresiones que se aprovechan de peculiaridades de cada navegador. Estas opciones son interesantes conocerlas para tenerlas a mano por lo que comentábamos al principio del post, pero debemos evitarlas siempre que podamos.

var isIE = '\v' == 'v';
if (isIE){
	// Código IE
} else {
	// Código alternativo
}

¿por que?

Principalmente por que no debemos olvidarnos de que tenemos que seguir el espíritu de los estándares web, no desarrollar para cada dispositivo sino un código para todos.

Detección de objetos (funcionalidades)

Aquí es donde tenemos que apostar fuerte, nuestros scripts pueden ser más potentes y compactos si logramos comprobar las funcionalidades disponibles antes de usarlas y apartir de ahí condicionar el script. Al igual que vimos en aquellos scrips que se autoprogramaban.

¿por que?

Por que se cambia el chip a la hora de programar, y se piensa en las funcionalidades y no en el navegador. Algo que ayuda a la creación y comprensión del código.

function getClassName(klass){
	if (document.getElementsByClassName) {
		return document.getElementsByClassName(klass);
	} else {
		// código alternativo.
	}
}

Conclusiones

Si usamos este sistema, nuestros scripts no deberían devolver nunca ningún error, en cambio usando el sistema de detección del navegador podemos encontrar con versiones del mismo que dispongan de funcionalidades diferentes.

¿Y tu? ¿Como programas tus scripts?