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

Como cada año se anuncian unos estudios en los que se estima cual es el lenguaje de programación más popular, con el paso de los años, podemos ver la tendencia de un lenguaje concreto y la popularidad ganada o perdida.

Este año, y como los últimos, Java sigue copando la primera posición y seguido por C/C++ suman yá casi el 50% de las aplicaciones desarrolladas. Tenemos que irnos a la posición 5 para encontrarnos el primer lenguaje destinado al desarrollo web, PHP, con un 8,6% de las aplicaciones desarrolladas se consolida un año más como el lenguaje de desarrollo web por excelencia.

En esta imagen de TIOBE vemos una maraña de líneas a las que si intentamos seguir nos mostrarán la evolución de los últimos 7 años. Vemos como la popularidad de Java decrece y lenguajes como Ruby experimentan un aumento significanto. ¿La web comienza a mandar?

Me ha parecido curioso que LOGO ocupe el lugar 21 por encima de Fortran y Ada, y muy cerca de ABAP, Lisp y COBOL. Me ha recordado los tiempos del colegio en los que nos enseñaban LOGO en las prácticas de Informática.

AV 10
GD 90
AV 40

Estos datos te pueden servir para ayudar a decidirte si estás pensando en que lenguaje de programación te gustaría iniciarte. Y si ya eres un desarrollador experimentado, podrás saber si el lenguaje con el que actualmente te peleas está obsoleto o sigue en la cresta.

jQuery.timepckr es un plugin para jQuer y que te permite ofrecer al usuario un sistema alternativo para introducir una hora.

Como vemos en la imagen, se trata de un sistema diferente lo que puede ser un problema para usuarios poco diestros en la navegación por Internet. Aunque es un sistema muy sencillo y rápido cuando sabes como funciona, ya que únicamente has de bajar el ratón para seleccionar la hora que quieres indicar.

Código

$(function(){
    $('#test-1').timepickr();
});

Muy sencillo, únicamente indicamos el elemento <input /> en el que alojaremos la opción seleccionada.

Opciones

Entre las opciones principales del plugin, nos encontramos unas cuantas que nos permiten personalizar en cierta medida el aspecto y funcionamiento del mismo:

• hour: Horas que se pueden seleccionar. Ej: [1,2,3,4,5,6,7,8,9,10,11,12]
• minute: Minutos disponibles. Ej: [0, 15, 30, 45]
• second: Segundos disponibles. Ej: [0, 15, 30, 45]
• amPm: Etiquetas AM / PM. Ej: ['am', 'pm']
• showHour: Muestra el selector de horas (default: true)
• showMinute: Mustra el selector de minutos (default: true)
• showSecond: Muestra el selector de segundos (default: false)
• showAmPm: Muestra el selector de AM/PM (default: true)
• showDelay: delay desde que se muestra (default: 0)
• hideDelay: delay desde que se cierra (default:0)li>
• timeout: Tiempo en segundos para el cierre automático (default: 0 == nunca)
• speed: Velocidad de la animación (default:0)
• onClose: Se ejecuta al cerrar
• onClosed: Se ejecuta una vez cerrado
• onOpen: Se ejecuta al abrir
• onOpened: Se ejecuta al estar abierto
• onHide: Se cierra al ocultarse
• repSpeed: Velocidad de reposicionamiento (default:50)
• repDelay:  Delay de reposicionamiento (default: 10)
• val: Valor inicial (default: false)
• formats: Muestra formatos (default:{})
• formats.field: Formato de hora del <input />. Ej: {hour:02d}:{min:02d} {amPm:s}
• formats.hour : Formato para las horas. Ej. {0:02d}
• formats.minute: Formato para los minutos. Ej: {0:02d}
• formats.second: Formato para los segundos. EJ: {0:02d}
• formats.amPm: Formato para AM/PM. EJ.{0}

Una de las nuevas especificaciones es sin duda la capacidad de geolocalizarnos directamente desde nuestro navegador, un sistema que usando el servicio externo nos dirá en el lugar en el que se encuentra el navegador que estamos usando.

Una propiedad un tanto controvertida, pero sobretodo muy útil que ya está disponible para Firefox en modo de extensión. Geode, es un plugin con el que extenderemos el objeto navigator que contiene la información relacionada con el navegador que estamos usando para añadirle una opción más con la información y métodos que necesitamos para geolocalizarnos.

Usar este objeto desde nuestro javascript es tan sencillo como llamar a una función javascript.

if (navigator.geolocation)
   navigator.geolocation.getCurrentPosition(function(pos){ // OK
        alert( pos.latitude + " -- " + pos.longitude );
      }, function(){ // KO
        alert( "Error getting your position. Mea Culpa!");
   });

Las pruebas que he hecho no me han posicionado correctamente, ¿ha alguien le funciona?.

Al hilo del artículo anterior, leo en Tripix que hace referencia a otro gran artículo de Quirksmode, en este caso una comparativa que hicieron hace 7 meses sobre el uso de DOM frente al famoso innerHTML.

En la tabla comparativa vemos a simple vista que el uso de DOM en los navegadores de Microsoft está muy por debajo del resto y que innerHTML parece ser la opción más rápida para todos los navegadores.

Pero hemos de recordar que el uso de DOM es el que nos va a dar mayor control sobre el código y sobretodo sobre los elementos que creamos con él.

Por ese motivo, recuerdo el post de replaceHTML, el innerHTML dopado del que hablamos hace unos meses y en el que veíamos una implementación que dependiendo del navegador que usabamos, usaba un sistema u otro.

function replaceHtml(el, html) {
	var oldEl = (typeof el === "string" ? document.getElementById(el) : el);
	/*@cc_on // Puro innerHTML para IE (que es más rápido)
	oldEl.innerHTML = html;
	return oldEl;
	@*/
	var newEl = oldEl.cloneNode(false);
	newEl.innerHTML = html;
	oldEl.parentNode.replaceChild(newEl, oldEl);
	return newEl;
};

Además como ya vimos, entres las principales diferencias entre HTML4 y HTML5, innerHTML pasará formar parte del estandard, y nos permitirá usarlo en un contexto XML.

Hace unos días me ví involucrado en una conversación sobre el uso de clases para definir estilos frente a definir los estilos directamente en el elemento. Quitando todas las obviedades sobre la comodidad de disponer de una clase y con todos los estilos necesarios para darle un aspecto diferente a esos elementos.

La conversación venía, ¿por si era mejor cambiar los estilos directamente mediante DOM, atacando a los atributos de style directamente o cambiando el className del elemento y dejar que el navegador sea el que asocie esa nueva class a los estilos recorriendolos y aplicándolo?

Pues trás 5 minutos de charla y 30 segundos de Google llegamos al gran Quirksmode, y evidentemente, como otras tantas veces, nos sacó de dudas con una de sus espectaculares tablas comparativas.

Funciones usadas

// Cambiar styles
function doChangeStyle()
{
	startTimer();
	var x = pointer.getElementsByTagName('td');
	for (var i=0;i<x.length;i++)
	{
		x[i].style.backgroundColor = '#00cc00';
		x[i].style.fontSize = '120%';
	}
	stopTime = new Date().getTime();
	setTimeout('stopTimer(2)',10);
}

// Cambiar className
function doChangeClassName()
{
	startTimer();
	var x = pointer.getElementsByTagName('td');
	for (var i=0;i<x.length;i++)
	{
		x[i].className = 'teststyle';
	}
	stopTime = new Date().getTime();
	setTimeout('stopTimer(1)',10);
}

El artículo, nos permite realizar una prueba creando una tabla y cambiandole los estilos a todos los elementos <td />.

Conclusiones

Pues la opción que no más usamos y que por un momento creí que podría ser la menos apropiada, className se comporta realmente rápida en todos los navegadores testeados excepto en Opera 9.5b que sería mejor usar el método style.