Detecta peticiones Ajax en PHP

Algo muy importante a la hora de desarrollar aplicaciones en Ajax es ofrecer la opción no-Ajax, y para ello es necesario detectar cuando la petición se realiza mediante Ajax, algo muy sencillo gracias a una cabecera que mandan los navegadores modernos:

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
echo "Es una petición AJAX"
}

Detect an AJAX Request in PHP

Laboratorio: índice lateral con jQuery

Algo que me gusta bastante de algunos editores tipo Netbeans es que cuando hay algún error en una línea aparece un enlace en el lateral en la posición relativa de la línea respecto al alto del editor.

Algo parecido se me ha ocurrido hacer con jQuery, obtener los elementos cabecera (H1..H6) y crear un índice, y mediante estilos y jQuery repartirlos por el lateral de la ventana.

indice_lateral.png

El código es sencillito, recupero los elementos h1..h6, calculo su posición X y luego ordeno el array por esta posición, creo una lista ordenada y anidada con OLs y LIs y con CSS y Javascript coloco los elementos donde corresponde.

		  $(document).ready(function() {
var ids = 0;
var haches = new Array();
for (var i=1; i<7; i++) {
$('#content h'+i).each(function () {
if (!this.id) this.id = 'haches_'+ids++;
if ($(this).css('display') != 'none') {
haches.push(new Array($(this).offset().top, $(this).text(), this.id, i));
}
});
}
haches.sort(function(a,b){return a[0]>b[0];});
var ant = 1;
var html = '<ol class="indice">\n'
for(var i=0; i<haches.length; i++) {
if (haches[i][3] > ant) {
html += '\n<ol>';
} else if (haches[i][3] < ant) {
html += '\n</ol>';
}
html += '<li id="haches'+i+'" class="indice'+haches[i][3]+'"><span><a href="#'+haches[i][2]+'">'+haches[i][1]+'</a></span></li>\n';
ant = haches[i][3];
}
html += '</ol>\n';
$(document.body).prepend(html);
$('#indice').css('position: absolute; top: 0px');
var alto = $(window).height();
var max = $(document).height();
for(var i=0; i<haches.length; i++) {
console.log(parseInt(alto*haches[i][0]/max));
$('#haches'+i).css('top', parseInt(alto*haches[i][0]/max)+"px");
$('#haches'+i).css('left', ($(window).width()-50)+"px");
}
});

Ni que decir tiene que le faltan cosas por hacer, como por ejemplo moverlo según se mueve el scroll, pero para hacerlo en un rato no está tampoco muy mal. Los distintos tipos de enlaces a cabecera tienen sus estilos propios (feos pero propios) y cuando te pones sobre uno de ellos aparece el título enlazando al elemento en cuestión (esto también habría que refinarlo).

Ejemplo

Gearman: crea aplicaciones distribuidas

Gearman provee un framework para distribuir aplicaciones entre diferentes máquinas o procesos. Permite realizar trabajo en paralelo, balanceo de carga y realizar llamadas de funciones entre diferentes lenguajes:

  • Open source
  • Multi-lenguaje: hay interfaz para varios lenguajes (cuya lista sigue creciendo), por lo que permite crear aplicaciones heterogéneas con clientes procesando trabajo en un lenguaje y la aplicación en otro.
  • Flexible: no está atado a un patrón de diseño específico. Puedes unir aplicaciones distribuidas con el modelo que elijas, por ejemplo Map/Reduce.
  • Rápido: tiene un protocolo y una interfaz simple con un servidor optimizado en C que minimiza la sobrecarga de la aplicación.
  • Incrustable: como es rápido y ligero, es válido para aplicaciones de todos los tamaños. Además es fácil añadir aplicaciones ya existentes.
  • Tolerancia a fallos: además de ayudar en la escalabilidad, permite tolerancia a fallos.

Gearman

Vía / Ronald Bradford

O3D: 3D en la web por Google

No conocía esta tecnología de Google que permite crear 3D en la web. O3D pretende ser el estándar para desarrollo 3D en la web. Los ejemplos que ofrecen son verdaderamente asombrosos, y para usarlo tan sólo es necesario instalar un plugin.
Para los que nos dedicamos al desarrollo web no creo que esto nos vaya a ser de utilidad, aunque nunca se sabe. Si estás interesado, un bueno punto de comienzo es el tutorial que os paso.

An Introduction to Google’s O3D

|

Laboratorio: evitar el scroll en los textarea con jQuery

Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.

En plan rapidito he hecho un script jQuery que realizaría esta función:

$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});

Integra las licencias Creative Commons en tu HTML con ccRel

ccREL es una forma de añadir la licencia Creative Commons a nuestros contenidos web. Su uso es muy sencillo, aunque a mi no me ha validado el HTML, si alguien sabe como conseguir que valide que lo diga:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://creativecommons.org/ns">
<head>
<title>Judith Myerson's Stuff</title>
</head>
<body>
<div about="">
This page, by
<a property="cc:attributionName" rel="cc:attributionURL" href="http://jmyerson.org/">
Judith Myerson
</a>,
is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
CC Attribution License
</a>.
</div>
</body>
</html>

ccREL

Vía / IBM Developer Works