Contenido

Ecoder, el editor de PHP escrito en Javascript

24 Mar

+ 7

Ecoder, es una aplicación escrita en PHP y Javascript que nos podemos descargar y con la que podremos editar los ficheros PHP de nuestro servidor directamente desde nuestro navegador.

ecoder
(Ver Imagen)

Puedes probarlo directamente desde la página oficial y descargarlo para usarlo en tu web directamente desde aqui.

Multiples Background en Firefox 3.5

24 Mar

+ 8

Ya van quedado menos técnicas CSS por poder disfrutar en nuestras páginas. La última viene de mano de Firefox y su próxima y esperada versión, la 3.5.  Que nos ofrece la posibilidad de usar múltiples backgrounds con las posibilidades que esto ofrece.

background: url('.../body-top.gif') top left no-repeat,
	    url('.../banner_fresco.jpg') top 11px no-repeat,
	    url('.../body-bottom.gif') bottom left no-repeat,
	    url('.../body-middle.gif')left repeat-y;

Podemos probarlo usando la última versión disponible y esta página que QuirksMode nos pone a nuestra disposición.

Via

Un apásionante viaje para mostrar una página web

24 Mar

+ 4

Via Adseok descubro este gráfico que nos muestra los procesos que una petición HTTP tiene que evaluar antes de mostrar el contenido de una página web. Interesante, creo que ya tengo poster para el despacho!! 😀

http-headers-status-v3

(ver Imagen)

Ojo, imagen muy grande (3138×2184)

htaccess para WordPress

24 Mar

+ 2

Manuel nos muestra 10 excelentes trucos .htaccess para WordPress. Si necesitas bloquear a algún usuario, o redirigir tus feeds a feeburner… seguro que podrás sacar algo interesante de el artículo.

El ritual del desarrollador

23 Mar

+ 4

La mejor forma de empezar la semana es riendo y la gente de Sinergia sin Control lo saben. Por eso hoy nos muestran el ritual del desarrollador, ¡¡ME LARGO!!

conditional_theme(), un theme cada situación

23 Mar

+ 4

¿Te gustaría que el theme de tu WordPress cambiara dependiendo de el usuario que lo visita? o ¿prefieres que se vea diferente a unas horas determinada? Quizas, prefieras que el theme dependa de la IP del visitante. Si es así, este artículo te puede interesar.

Mediante la API de filtros de WordPress, podemos aplicarlos en varios pasos de la ejecución de nuestro WordPress.

Funcionamiento del filtro

Para ilustrar el funcionamiento de los filtros de WordPress, un ejemplo en código:

// Función de ejemplo que encontraríamos en el código de WordPress
function function_de_ejemplo(){
	// Variable
	$variable = "Esto es una variable";

	// Devolvemos la variable filtrada
	return apply_filters( "mi-filtro", $variable);
}

// Definimos la función que modificará la salida del filtro.
function function_mi_filtro($variable){
	// Controlamos la variable
	if ($variable != '')
		return $variable;
	else
		return "Era vacio";
}

// Añadimos la función al filtro
add_filter("mi-filtro", "function_mi_filtro");

// Ejecutamos la función
function_de_ejemplo();

Selección de theme

Entre estos pasos nos encontramos con la selección del theme y mostrarlo al usuario.

add_filter('template', 'TU_FUNCION');
add_filter('stylesheet', 'TU_FUNCION');

En este proceso tenemos dos funciones que intervienen en la selección del theme, template y stylesheet. Así que el filtro podría quedar de esta manera:

function conditional_theme( $template = '' ) {
 	/*
		AQUI DEFINIMOS NUESTRA CONDICION
		Y DEVOLVEMOS EL TEMPLATE QUE DESEEMOS.
	*/
	return $template;
}

add_filter('template', 'conditional_theme');
add_filter('stylesheet', 'conditional_theme');

Carga asíncrona de grandes cantidades de dátos con Ajax

22 Mar

+ 31

Ajax es una técnica para cargar asíncronamiente datos que podremos usar en nuestras páginas web. Esta técnica ha permitido a las aplicaciones web que evolucionen hasta el nivel actual y darán lugar a nuevas aplicaciones más potentes y complejas.

Esta técnica se basa en el uso de xmlhttprequest() para lanzar llamadas de forma asíncrona al servidor, pudiendo así devolver datos cargados posteriormente a la carga de la página. De esta forma la carga inicial de la página puede ser menor y dejar a elección del usuario cargar los datos a medida que los vayan necesitando.

El problema no lo encontramos con la cantidad de datos. Si el número de datos devueltos por el servidor es muy alto esto suele convertirse en una larga espera, con el fichero .gif de loading reglamentario.

Para intentar mitigar este problema he estado haciendo una serie de pruebas, con fín de dejar los ficheros XML que hasta ahora he estado usando en algunos proyectos.

XML

Durante mucho tiempo ha sido el sistema usado en muchas implementaciones para obtener datos de forma asíncrona. De ahí el propio nombre de AjaX (Asynchronous JavaScript And XML). Estos ficheros, generalmente ofrecen mayor interconexión con multiples herramientas.

En un uso para carga asíncrona, nos encontramos como príncipal problema el peso del fichero y tiempo invertido en recorrer el fichero XML para obtener los datos.

....
<hotel>
	<code>0000</code>
	<name>Hotel0</name>
	<direction>Calle0</direction>
	<telef>Telf0</telef>
	<geo>
		<lat>00</lat>
		<lng>00</lng>
	</geo>
</hotel>
....
// Javascript
var hotelDescription = data, hotelList = [];
var data = data.getElementsByTagName("hotel");
for (var x in data) {
	var hotel = data[x];
	if (!hotel.getElementsByTagName) continue;
	hotelList.push(hotel.getElementsByTagName("name")[0].firstChild.data);

		hotelDescription[hotel.getElementsByTagName("name")[0].firstChild.data] = {
			code: hotel.getElementsByTagName("code")[0].firstChild.data,
			name: hotel.getElementsByTagName("name")[0].firstChild.data,
			direction: hotel.getElementsByTagName("direction")[0].firstChild.data,
			telf: hotel.getElementsByTagName("telef")[0].firstChild.data,
			geo: {
				lat: hotel.getElementsByTagName("lat")[0].firstChild.data,
				lng: hotel.getElementsByTagName("lng")[0].firstChild.data
			}
		};

}

JSON

La primera alternativa, fué JSON, una implementación muy clara y natural de mostrar datos. Al tratarse de un fichero TXT podemos hacer que ocupe menos espacio y al evitar la estructura XML conseguimos que el tiempo invertido en recorrer el XML para obtener los datos.

Pero por contra, para poder usar los datos obtenidos hemos de usar la función eval() lo que nos penaliza la carga del fichero. Una vez evaluado el código el tiempo empleado en preparar los datos para poder usarlos es mínimo y sin duda, el más rápido de los sistemas exáminados.

....
{
	code: 0000,
	name: 'Hotel0',
	direction: 'Calle0',
	telef: 'Telf0',
	geo: {
		lat: 00,
		lng: 00
	}
}
....
// Javascript
var hotelDescription = data, hotelList = [];
for (var x in data) hotelList.push(data[x].name);

TXT

La gente de Flickr comentaba hace poco como hicieron para devolver más de 10.000 resultados en menos de 200ms. Y obviamente me ví obligado a contemplar esta técnica.

Se basa en usar una estructura preestablecida en un fichero de texto plano. Usando un separador por registro y otro por campos dentro de cada registro. De esta forma a la hora de cargar el fichero simplemente tendremos que hacer una serie de split() para cortar la cadena y convertirla en una variable que podamos usar.

Como mayor ventaja, esta técnica ofrece un tamaño de fichero mucho más pequeño que los comentados anteriormente. Por contra el tiempo de proceso sobre los datos para obtener una variable que pdamos usar es mucho mayor que la necesaria para procesar el fichero JSON, pero bastante menor que el empleado para un fichero XML.

0000:Hotel0:Calle0:Telf0:00:00|...
// Javascript
var tmp = data.split("|");
var hotelList = [];
var hotelDescription = [];
for (var x = 0, len = tmp.length; x<len; x++) {
	var hotel = tmp[x].split(":");

	hotelList.push(hotel[1]);

	hotelDescription[hotel[1]] = {
		code: hotel[0],
		name: hotel[1],
		direction: hotel[2],
		telf: hotel[3],
		geo: {
			lat: hotel[4],
			lng: hotel[5]
		}
	};
}

Comparativas

Para las pruebas, he realizado una pequeña aplicacion que nos permite cargar 500, 1000, 2000, 5000 o 10000 registros en los formatos anteriores (XML, JSON o TXT). Para los gráficos he usado los resultados obtenidos en Firefox 3.0.7 en Mac Os X.

Si queréis podéis probar por vosotros mismos los resultados que obtendríais en diferentes navegadores directamente aqui.

500 registros

500_registros

1000 registros

10000_registros

2000 registros

2000_registros2

5000 registros

5000_registros

10000 registros

10000_registros

Parece que los gráficos hablan por si solos, y podemos sacar una información interesante.

Conclusiones

bigajax

De los resultados obtenemos las siguientes premisas:

XML

  • Son los ficheros más pesados
  • El tiempo de procesamiento es mayor que los demás.

JSON

  • Son los ficheros que más tiempo tardan en cargar completamente.
  • El tiempo de procesamiento es el más rápido de los testeados.

TXT

  • Son los ficheros menos pesados.
  • El tiempo de proceso y carga son bajos aunque no destacan frente a los demás.
  • El tiempo total es el menor de los testeados.

Descargar el proyecto

He subido el proyecto a Github para que los descargueis y usais si quereis.

Internet Explorer 8, primeros impresiones técnicas

20 Mar

+ 26

Ya han sido muchos los blogs que han comentado esta nueva versión, y hay que recordar que esta versión es interesante por que marca un nuevo punto de inflexión en la historia de Internet Explorer. Sin duda, una gran alegría para muchos desarrolladores que desean que esta nueva versión entre por la puerte grande en forma de actualización crítica, cosa que dudo que veamos a corto plazo.

acid3chart

Esta versión, además de venir cargada de esperezan, viene cargada de buenos resultados en algunos de los reviews que he visto por ahí.

cssselectorschart

Creo que es importante destacar lo cerca que está de la versión actual de Firefox 3.0 en cuanto a selectores CSS3, aunque aún hay trabajo detrás de alguno importante.

javascriptbenchmarkschart

En cuanto al javascript, los resultados SunSpider me han sorprendido, han pegado un gran salto frente aquella comparativa que vimos hace ya más de un año.

Esperanzador, y un gran paso adelánte para el navegador más usado de la red.

(Las imágenes son propiedad de Billupsdesing)

WebKit y la personalización de los scrollbars

20 Mar

+ 1

La última versión de WebKit ya dispone de la posibilidad de dar le estilos a los scrollbars de los elementos con overflow. Esto abre un abanico de posibilidades y elimina la necesidad de usar técnicas basadas en Javascript para conseguirlo. [Demo]

WordPress 2.8 para Abril de 2009

19 Mar

+ 4

Hoy, Lorelle nos cuenta que el equipo de desarrollo de WordPress 2.8 ya ha puesto fecha para la aparición de la versión final para el mes de Abril. En esta versión veremos una gran cantidad de mejoras entre las que es interesante destacar:

  1. the_modified_author(), nuevo tag para nuestros themes con el que podremos conocer el autor que hizo la última actualización.
  2. Importantes mejoras en la api de Widgets, se va a implementar una clase para facilitar la creación de Widgets mucho más potentes que los actuales. Un ejemplo de como serían las implementaciones.
  3. Mejoras en carga de ficheros Javascript y CSS.
  4. body_class(), otro tag para nuestros themes que especificará un buen listado de opciones sobre este atributo haciendo como hasta ahora venía haciendo el theme sandbox.

y muchas, muchas más…