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

Robert Nyman publicó en 2005 un artículo en el que mostraba la “Ultimate getElementsByClassName“, una función desarrollada en Javascript que sin necesidad de usar ningún tipo de framework nos permite obtener todos los elementos de una misma clase pasada por parámetro.

Ultimate getElementsByClassName (2005)

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

Esta funcionalidad que actualmente está contemplada para el estandar y que será integrada en todos los navegadores futuros, nos ahorrará muchas líneas de código cuando esté implementada como parte del núcleo del navegador.
Robert ha desarrollado de nuevo la función, añadiéndole una serie de mejoras que han hecho crecer considerablemente la función:

Ultimate getElementsByClassName (2008)

/*
	Developed by Robert Nyman, http://www.robertnyman.com
	Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
	if (document.getElementsByClassName) {
		getElementsByClassName = function (className, tag, elm) {
			elm = elm || document;
			var elements = elm.getElementsByClassName(className),
				nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
				returnElements = [],
				current;
			for(var i=0, il=elements.length; i<il; i+=1){
				current = elements[i];
				if(!nodeName || nodeName.test(current.nodeName)) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	else if (document.evaluate) {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || “*”;
			elm = elm || document;
			var classes = className.split(” “),
				classesToCheck = “”,
				xhtmlNamespace = “http://www.w3.org/1999/xhtml”,
				namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
				returnElements = [],
				elements,
				node;
			for(var j=0, jl=classes.length; j<jl; j+=1){
				classesToCheck += “[contains(concat(' ', @class, ' '), ' " + classes[j] + ” ‘)]”;
			}
			try	{
				elements = document.evaluate(”.//” + tag + classesToCheck, elm, namespaceResolver, 0, null);
			}
			catch (e) {
				elements = document.evaluate(”.//” + tag + classesToCheck, elm, null, 0, null);
			}
			while ((node = elements.iterateNext())) {
				returnElements.push(node);
			}
			return returnElements;
		};
	}
	else {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || “*”;
			elm = elm || document;
			var classes = className.split(” “),
				classesToCheck = [],
				elements = (tag === “*” && elm.all)? elm.all : elm.getElementsByTagName(tag),
				current,
				returnElements = [],
				match;
			for(var k=0, kl=classes.length; k<kl; k+=1){
				classesToCheck.push(new RegExp(”(^|\\s)” + classes[k] + “(\\s|$)”));
			}
			for(var l=0, ll=elements.length; l<ll; l+=1){
				current = elements[l];
				match = false;
				for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
					match = classesToCheck[m].test(current.className);
					if (!match) {
						break;
					}
				}
				if (match) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	return getElementsByClassName(className, tag, elm);
};

Nuevas funcionalidades

• Utiliza getElementsByClassName nativo si está disponible
• Utiliza XPath nativo si está disponible
• Soporta múltiples class en una misma petición
• Devuelve un array con el que trabajar.

Modo de uso

La función puede recibir 3 parámetros:

• class: El class que estamos buscando. Obligatorio.
• tag: El tag que contiene la class. Opcional.
• elm: Elemento padre desde el que empezar a buscar.Opcional

getElementsByClassName(class, tag, elm);
// Ejemplos
getElementsByClassName("rojo"); // Todos los elementos con class="rojo"
getElementsByClassName("rojo azul grande"); //Todos los elements con class="rojo", class="azul",...
getElementsByClassName("rojo", "p"); //Todas las P con class="rojo"
getElementsByClassName("rojo", "p", document.getElementById("content")); // Todas las P con class="rojo" en el elemento content e hijos.

Para realizar una búsqueda por más de una class, deberemos separarlas por espacios en el parámetro class.

Ozh, escribe un artículo en el que nos muestra los cambios más significativos de la nueva versión de Wordpress, la 2.6, en relación a los desarrolladores de plugins.

Puesto que han cambiado muchas de las opciones del núcleo de Wordpress, nos veremos obligados a realizar modificaciones de la mayoría de plugins.

1. El directorio wp-content

Vimos que Wordpress daba la posibilidad de sacar la carpeta wp-content/ de la carpeta web y esto ha ocasionado una gran cantidad de cambios entre ellos el nacimiento de dos nuevas constantes que se encargan de conocer la nueva ruta.

Actualmente usamos la constante ABSPATH para hacer referencia a la ruta de la raiz de nuestro Wordpress.

$plugin_path = ABSPATH . '/wp-content/plugins/' . plugin_basename(dirname(__FILE__));
$plugin_url = get_option('siteurl') . '/wp-content/plugins/' . plugin_basename(dirname(__FILE__));

Esta constante seguirá disponible, pero ya no tiene por que estar el directorio wp-content/ colgando de la raíz de Wordpress. Por ese motivo tendremos que reemplazarlo para tener un código más permisivo:

// Pre-2.6 compatibility
if ( !defined(’WP_CONTENT_URL’) )
	define( ‘WP_CONTENT_URL’, get_option(’siteurl’) . ‘/wp-content’);
if ( !defined(’WP_CONTENT_DIR’) )
	define( ‘WP_CONTENT_DIR’, ABSPATH . ‘wp-content’ );
// Cogemos la ruta
$plugin_path = WP_CONTENT_DIR.’/plugins/’.plugin_basename(dirname(__FILE__));
$plugin_url = WP_CONTENT_URL.’/plugins/’.plugin_basename(dirname(__FILE__));

Nacen WP_CONTENT_DIR y WP_CONTENT_URL, dos constantes que tendremos que tener muy presentes.

2. Incluyendo el fichero wp-config.php

El fichero wp-config.php tambien permite ser sacado de nuestra carpeta web, lo que significa que tenemos el mismo problema anterior, no debemos creer que todos los usuarios lo tendrán instalado en la raíz de su Wordpress.

Antiguamente, al estar wp-content/ en la raiz podíamos usar../../../ para llegar al directorio raíz y usar wp-config.php en nuestros plugins.

require_once('../../../wp-config.php');

Esto en Wordpress 2.6, tambien ha cambiado:

$root = dirname(dirname(dirname(dirname(__FILE__))));
if (file_exists($root.'/wp-load.php')) {
	// WP 2.6
	require_once($root.’/wp-load.php’);
} else {
	// Antes de 2.6
	require_once($root.’/wp-config.php’);
}

Poco a poco van cerrandose los tickets del Roadmap y va quajando más lo que tendremos los usuarios y desarrolladores de Wordpress 2.6, así que mientras tanto, tendremos que estar atentos a todos estos cambios.

Olga Carreras, es una de las referencias en cuanto a usabilidad/accesibilidad del panorama hispano. Su apoyo a los estándares web y su lucha por conseguir una internet para todo el mundo la llevó por el camino correcto de consultoría, de esa forma asesora a las grandes empresas el camino correcto que se ha de seguir.

Ficha Técnica

• Nombre: Olga Carreras
• Url Blog: http://olgacarreras.blogspot.com/
• Perfil: ¿Quién soy?

Continua —>

Emilio me pasa este enlace en el que nos muestran una recopilación de 4 navegadores y sus 4 versiones de Firebug.

• Safari4 + Web Inspector
• Firefox3 + Firebug
• Internet Explorer8 + Developer Tools
• Opera 9.5 + Dragonfly

¿con cual te quedas?

Gracias Emilio.

Hoy es el día en el que Wordpress 2.6 publica la beta 2 con una serie de correcciones:

• Correcciones en inserción y edición de imágenes
• Correcciones en conexión SSL
• Correcciones en internacionalización (i18n )
• Mejoras en la documentación interna
• Mejoras en el suggest de los tags
• Correcciones en TinyMCE 3.1.1 con Opera 9.5 y Safari
• jQuery UI 1.5.1
• Muchas más…

[Descargar]

Actualización

Buayacorp nos avisa de un problema detectado en los protocolos de publicación remota de Wordpress.

No me gusta meter baza al trabajo de otros, ya que en cualquier momento puedo ser yo al que le metan baza. Pero es que esto me ha parecido increíble y lo quería compartir.

Para evitar problemas y quejas, me voy a inventar los nombres y así, todos contentos.

Antecedentes

Hace unos meses hablamos de una situación laboral en la que me ví involucrado, un problema de concepto que con la experiencia se puede suplir.

Han pasado unos meses y muchas cosas, entre ellas ahora estoy desarrollando yo desde 0 ese proyecto. Un proyecto que por el momento me guardo y que no es relevante ya que lo desarrollo para la empresa en la que trabajo.

Después de haber roto las negociaciones con la empresa que inició el proyecto, al ver que este parecía no terminar nunca y que lo que había hecho no acababa de convencer al cliente, decidieron cancelar el proyecto y traerlo a la empresa en la que trabajo.

Así que hace unos 3 meses me hicieron llegar el código fuente de lo que tenían hecho para dicho proyecto, el proyecto estaba desarrollado en JSP (Java Server Pages), XSL (Extensible Stylesheet Language) y como motor de base de datos PostgreSQL.

Por motivos de compatibilidad con la infraestructura que tenemos montada en los servidores de la empresa tuvimos que migrar la parte de la base de datos a Oracle 10g. Una tarea bastante sencilla (si no se complica).

El código

Una vez solucionado los problemas de base de datos, comenzamos a revisar el código fuente de la aplicación. La verdad es que he tenido que rehacer casi el 95% del código de las páginas JSP ya que era algo realmente complicado de entender, además de que no se ajustaba a lo que el proyecto necesitaba, hasta aqui, todo más o menos bien.

El problema viene cuando empiezo a revisar el HTML/ Javascript / CSS. Pese a que no tenía una estructura cerrada correctamente, misteriosamente funcionaba (lo poco que había hecho). Pero al revisar el código encontré un nuevo tag, <spam></spam>.

El tag <spam></spam>

En un principio pensé, se han equivocado y han pulsado la M en lugar la N, no pasa nada, yo escribo mucho peor…. pero al mirar más afondo, no fuí capaz de encontrar ningún <span></span>;, todos eran <spam></spam>…. hice una busqueda y el resultado me asustó.

Found 1.230 match(es) in 435 file(s)

Entonces ya me empecé a preocupar, busqué por el tag <span></span> y evidentemente no había ni uno solo, en los 435 ficheros que componían el proyecto actual.

Anécdota

Esto únicamente es una anecdota sacada del trabajo, seguro que tu has tenido alguna parecida. ¿La quieres compartir?