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.

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.

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?

Firebug, ya de por sí es (para mí) la mejor extensión existente para Firefox y de la que no podría prescindir en el día a día. Dispone de todas las herramientas necesarias para hacer un debug exhaustivo de nuestras aplicaciones web. Así y todo siempre se puede mejorar, todo se puede mejorar.

Con estas 4 extensiones podremos complementar unas opciones para que Firebug se convierta en “la única” de mi navegador.

1. Jiffy, una extensión que mejora el apartado Net mostrando más detalladamente la información referente a la carga de la página.
2. YSlow, extensión que testea una serie de reglas para comprobar el correcto rendimiento del sitio.
3. FireCookie, integra un apartado extra llamado Cookies en el que podremos gestionar, manipular o eliminar las cookies que intervienen en cualquier página.
4. FirePHP, nos permitirá interactuar desde PHP con nuestra consola Firebug.

via

La gente de SEOmoz, ha desarrollado una Cheat Sheet o “Chuleta” con todos los factores más importantes a la hora de pensar en SEO.

La “chuleta”, se compone de 2 caras en las que podemos encontrar desde los tags HTML, como y cuando deben ser usados, hasta un ejemplo de robots.txt para indicar a los robots que escanean la página como han de proceder. Importante tenerla a mano si nos interesa mucho el posicionamiento de nuestra web.

[Descargar en PDF][Via]