Intel acaba de estrenarse en la web 2.0 publicando una API de acceso al sistema: Intel Web 2.0 Technology Development Kit (TDK). Así, es posible acceder al entorno de ejecución desde nuestra aplicación corriendo en un navegador, por ejemplo para ver cuanta batería queda, la conectividad y ancho de banda, espacio en disco, cantidad de memoria, geoposicionamiento (si lo tiene), incluso obtener información del hardware instalado como dirección MAC o fabricante. En la Intel Web 2.0 TDK Developer Guide (PDF) se describe con detalle.
El mal acecha…
Hay veces en las que un agradecimiento no es suficiente:
¿Te haces una idea las de horas de curro que ha ahorrado este tipo con su Firebug? Mínimo se merece una ayuda.
Si aun no sabes de lo que es capaz Firebug mira esta vídeo (en inglés) por el propio autor. O esta transcripción (en inglés) de Lauren García.
Gracias Joe Hewitt.
dhtmlHistory
DhtmlHistory es un interesante mini framework para simular el comportamiento del botón “Atrás” en aplicaciones web realizadas con AJAX, desarrollado por Brad Neuberg.
En la página del autor podeis encontrar varios ejemplos de funcionamiento junto a una explicación mas detallada, así como descargaros la última versión.
Error en IE7
A continuación un caso curioso que me ha acontecido recientemente usando DhtmlHistory junto a IE7.
Estamos desarrollando una aplicación web con AJAX que requería controlar el botón “Atrás”. En IE7 experimentaba un comportamiento extraño al cambiar estilos dinámicamente, siempre que tenían que ver con ocultar o mostrar partes de la página. El efecto era que la página se desplazaba o centraba en la venta aleatóriamente.
Finalmente pudimos comprobar que eliminando el javascript dhtmlHistory.js el efecto no se producía. Centrados en el objeto de error nos dimos cuenta gracias al DOM Explorer Toolbar que el HTML se estaba generando incorrectamente, con todo el código HTML en la etiqueta HEAD y únicamente con un TEXTAREA en el BODY:
Al eliminar el dhtmlHistory.js, el HTML se generaba corréctamente. Supongo que, pese a que renderizaba bien el HTML generado por incorrecto que fuese (recuperación de errores lo llaman), cuando se aplicaban estilos de manera dinámica se hacía incorrectamente al encontrarse en el HEAD.
La solución
La solución es sencilla: generar el HTML necesario una vez que la página se ha cargado, para lo que se han modificado los métodos init() y create() en dhtmlHistory.js:
init():
/** private */ init: function() {
// write a hidden form into the page
var styleValue = "position: absolute; top: -1000px; left: -1000px;";
if (this.debugging == true) {
styleValue = "width: 30em; height: 30em;";
}
var newContent =
"<form id='historyStorageForm' "
+ "method='GET' "
+ "style='" + styleValue + "'>"
+ "<textarea id='historyStorageField' "
+ "style='" + styleValue + "'"
+ "left: -1000px;' "
+ "name='historyStorageField'></textarea>"
+ "</form>";
document.body.innerHTML+=newContent; // CHANGED:
this.storageField = document.getElementById("historyStorageField");
},
create():
/** private */ create: function() {
// get our initial location
var initialHash = this.getCurrentLocation();
// save this as our current location
this.currentLocation = initialHash;
// write out a hidden iframe for IE and
// set the amount of time to wait between add() requests
if (this.isInternetExplorer()) {
var aux = "<iframe style='border: 0px; width: 1px; "
+ "height: 1px; position: absolute; bottom: 0px; "
+ "right: 0px; visibility: visible;' "
+ "name='DhtmlHistoryFrame' id='DhtmlHistoryFrame' "
+ "src='blank.html?" + initialHash + "'>"
+ "</iframe>";
document.body.innerHTML+=aux; // CHANGED
// wait 400 milliseconds between history
// updates on IE, versus 200 on Firefox
this.WAIT_TIME = 400;
}
Y finalmente, mover la inicialización que hay al final del fichero al manejador de carga de la página, en nuestro caso:
Event.observe(window, 'load', init_page, false);
function init_page(){
/* Initialize dhtmlHistory*/
window.historyStorage.init();
window.dhtmlHistory.create();
}
Actualización [28.feb.2007]
La solución que aporta Stefan Gustafsson en los comentarios es bastante más secilla y además funciona en IE 5. Consiste en mover la inicialización al final de la página, os la recomiendo.
Que aproveche.
Internet Explorer
- View Partial Source: permite ver el código HTML del aréa seleccionada
- CSS_Stylesheets: permite explorar las CSS que usa una página
- IE Developer Toolbar, barra de desarrollo imprescindible
- Fiddler, proxy de depuración que permite trazar todas las peticiones
Firefox
Eclipse
[Actualización 15.feb.2007]
Añadido Fiddler a Internet Explorer
Está a punto de lanzarse la versión 1.0 de una de las mejores herramientas de desarrollo Web, esencial si trabajas con AJAX, su nombre es FireBug y para celebrarlo han creado su propia web.
Para quien no lo sepa es una extensión para FireFox con múltiples funcionalidades para la depuración de código HTML, CSS y Javascript, que entre otras cosas indica si se ha producido un error en la página, permite ver el código de los elementos seleccionados con el ratón y al seleccionar el código HTML remarcar el elemento visualmente, mostrar la consola javascript, depurar de la manera habitual, ver las peticiones XMLHttpRequest, etc.
Entre las nuevas funcionalidades, a parte de la mejora evidente de interfaz, están editar on the fly el HTML, las CSS y el Javascript; reglas de medición; monitorizar la actividad de red; explorador DOM; funciones de trazado…
Hasta entonces puedes intalarte la extensión FireBug 0.4.1.
