Año nuevo, vida nueva. Año nuevo, moda nueva. Así que estamos muy contentos de recibir 2005 con noticias de este tipo. Parece que por fin hay gente que apuesta en serio por DHTML para solucionar problemas de navegación o usabilidad, o simplemente creando aplicaciones dinámicas que usan esta tecnología en lugar del omnipresente Flash. Vamos a ver unos cuantos ejemplos.

• esta impresionante aplicación para visualizar mapas de Suiza, incluye efectos de zoom. No, en serio, no es Flash.
• Google ha desarrollado recientemente dos proyectos interesantes. En el caso de Gmail, nos permite chequear el número de emails recibidos sin recargar toda la página (entre otras muchas cosas), mientras que en Google Suggest al ir escribiendo la búsqueda aparecen sugerencias de los términos más parecidos y su número de documentos, adelantándose a tu intención. Estos dos ejemplos usan el objeto XMLHttpRequest, que nos permite realizar peticiones al servidor sin recargar la página. Aquí podeis ver exactamente cómo funciona el suggest. Podemos esperar más cosas brillantes por parte de Google próximamente, sabiendo que Mr. Boodman se ha pasado a su bando, de momento para mejorar Blogger.
• No es que el uso de scripts remotos en tiempo real sea algo nuevo, hasta ahora se usaban varios métodos como el iframe actuando de buffer, recibiendo datos de una página y escribiendo en una capa, o bien el truco de usar una imagen para añadir scripts, o el menos conocido a la par que elegante método de Dan Pupius (que debo tener por ahí), que representaba una mejora sustancial respecto al pionero. Incluso el ahora de moda XMLHttpRequest es algo viejo, solo que ahora está muy bien implementado en nuevos navegadores. Ya existian los scripts de WebFX y la Sarissa API. Para no seguir aburriendo con tecnicismos y palabrería, ahí va un pequeño resumen con definiciones y ejemplos de uso en este wiki de sourceforge.
• también interesante resulta el Javascript Shell, que nos permite hacer pruebas con el DOM usando una interface tipo linea de comandos.
• también se pondrá de moda el concepto de DHTML no intrusivo, por el cual el script es una mejora en usabilidad y nunca un requisito ni el mecanismo para escribir contenido. Ejemplos hay cada vez más, como el excelente fancy menu, un menú tipo flash basado en listas html, igual que último apaño de un script de Aaron (en este caso el Accelimation) que he hecho para el menú de pixilate, o bien cualquier otro script no intrusivo

Ah, y antes de irme, solamente decir que este año sí que van a fructificar proyectos relacionados con DHTML a nivel local (algo se cuece desde hace un tiempo con Pedro y otros bloggers cercanos) e internacional (13thparallel cambia de formato, el Dojo Toolkit, etc). Otro día seguimos.

Últimamente se ha hablado mucho del lanzamiento definitivo de la primera versión terminada de Mozilla Firefox. Sin duda es un buen programa y sobretodo una excelente alternativa a Internet Explorer. Además de la seguridad que ofrece, su navegación por pestañas y su rapidez, lo que a mi entender lo hace tan atractivo (más que Opera, la otra gran alternativa) es la gran cantidad de extensiones que tenemos a nuestra disposición, que nos permiten configurar no solo la apariencia sino también las funciones de nuestro navegador. Yo por ejemplo uso las siguientes:

• Tabbrowser Preferences 1.1.1 para mejorar la navegación por pestañas
• Web Developer 0.8 (basado en el anterior PNH Toolbar, al cual mejora bastante) para todo lo relacionado con el desarrollo web, como deshabilitar estilos, visualizar bordes de tablas, editar las CSS de una página al vuelo, etc.
• greasemonkey permite añadir scripts propios a páginas ajenas, para cambiar su comportamiento. Por ejemplo para hacer que todos las url de una página sean enlaces, o destruir los famosos target _blank
• Adblock permite bloquear elementos no deseables (por ejemplo banners) usando expresiones regulares (para bloquear sitios específicos, carpetas, etc.)
• Page Rank Status añade un pequeño icono en la barra de estado para mostrar el page rank de esa página visitada
• ieview permite mediante el uso del menú contextual abrir esa misma página en Internet Explorer (así no tenemos ni siqueira que copiar y pegar)
• Gmail Notifier para estar al tanto de nuestro buzón de correo en Gmail
• Bloglines Toolkit permite estar informado de las actualizaciones en nuestra lista de subscripciones a noticias
• ForecastFox nos indica el tiempo que hace fuera y nos da una previsión para los próximos días

Asimismo, otra gran noticia ha sido el lanzamiento de la primera versión terminada de Mozilla Thunderbird, un excelente gestor de correo electrónico. También dispone de numerosas extensiones, pero en este caso yo lo uso tal cual viene de fábrica.

Para finalizar, recomendar de nuevo el uso de un buen programa antivirus como es el AVG de Grisoft, que además es gratuito. En esta nueva versión (AVG 7.0 Free) hay una utilidad para asociar el antivirus al gestor de correos, con la novedad de que funciona incluso si usamos el Thunderbird. Pefecto.

Acabo de lanzar la versión 1.3, que incluye algunos cambios respecto a la explicación original de cómo usar el script, parámetros, etc (ya han sido actualizados también ahí):

• Hay una version "ligera", que funciona solamente en navegadores actuales e inserta el flash al vuelo (no tiene la opción de retrasar la carga).
• El id del objeto flash debe pasarse junto al argumento ruta (ej.: "fl1,in,out"). Como la versión ligera solamente funciona en navegadores actuales tansolo requiere el id del flash y de su ancestro (no la ruta completa que necesitábamos para ns4).
• El id se añade al objeto y al embed. Para evitar duplicar id's embed usará el id en el name y "name"+id en el id.
• La cadena ruta también se enviará como flashvar, para que podamos acceder a ella desde javascript.
• El elemento ancestro adquiere el mismo tamaño que el objeto flash (para ajustar el flujo de la página).

Bájate el último archivo comprimido con ejemplos para verlo funcionando.

Siempre he pensado que el usuario debe poder elegir dónde quiere cargar un nuevo documento desde un enlace. Yo defiendo que como desarrollador puedes usar una cookie y ofrecer esa posibilidad si el usuario quiere, pero solamente si quiere (podeis ver el formulario de preferencias al fondo de la página). Mucha otra gente opina que lo mejor es no dejarles pensar y abrirlo todo en una ventana nueva. Odio esos casos. ¿Qué pasa si a mi no me da la gana irme de mi ventana? Oye, que si me gusta tu web ya volveré, tranquilo... Pues no, se empeñan en usar el target _blank. Bueno, pues todo esto se ha terminado. Adiós a los malditos target _blank. Si quereis saber cómo, seguid leyendo...

Acaba de salir del horno un interesante artículo en diseñorama sobre DHTML y cómo programar páginas web manteniendo la accesibilidad, lo que últimamente se denomina DHTML no intrusivo. Ah, si, se me olvidaba, escrito por el menda, si tienen algún comentario se agradecerá la crítica constructiva, tanto si quieren dejarlo allí como aquí.Poco a poco iré añadiendo más ejemplos por aquí, si el tiempo lo permite.

Acabo de descubrir cómo añadir números de linea a los bloques de código que están dentro de texto preformateado. Se trata de usar una función javascript que recoge todos los elementos pre, y llama a una expresión regular que devuelve el número de lineas en ese bloque. Entonces, usando innerHTML simplemente añadimos una capa div que contiene los números de linea y se le da estilo usando CSS. El javascript, que forma parte de un espacio propio (un objeto literal para encapsular sus funciones) sería algo del estilo:

// adds line numbers to code sections:
numberCodeTags : function(){
	var PRE = document.getElementsByTagName('pre'); 
	var nl = /\n+/mg;
	for (var i = 0; i < PRE.length; i++) {
		var t = PRE[i].innerHTML;
//mozilla/ff cannot select all lines of a code element 
//that is inside a pre element:
		if(document.addEventListener && !window.opera) {
			Extras.getCodeText(PRE[i]);
		}
			
//will only work in mozilla+op (IE replaces \n by a space so its useless):
		var NL = Extras.getMatchArray(t,nl);
		if(NL) {
		var numeros = "";
		for (var lineas = 1; lineas < NL; lineas++) 
		numeros += lineas +"\n";
		PRE[i].innerHTML += "<div class='lines'>"+numeros+"</div>";
		}
	}
},
	
// matches a regexp to a string, returns array
getMatchArray : function(myString,myRegExp){
	return myString.match(myRegExp).length;
},

// FF  hack to make easier select all lines of a 
//code element that is inside a pre element:
getCodeText : function(obj){
	var color = CSS.getStyle(obj.firstChild,"color");
	var bgcolor = CSS.getStyle(obj.firstChild,"backgroundColor");
	if(bgcolor=="transparent") bgcolor="white";
	obj.onmouseover = function(){
		obj.firstChild.style.color = bgcolor;
		obj.firstChild.style.backgroundColor = color;
	}
	obj.onmouseout = function(){
		obj.firstChild.style.color = color;
		obj.firstChild.style.backgroundColor = bgcolor;
	}
},

El CSS podría ser algo parecido a estas lineas:

pre	{
	position:		relative;
	color: 			#913117;
	padding: 		0px 1em 0px 1em;
	margin: 		0px;
	font-family:		Courier, monospace; 
	font-size:		1em;
	}
code	{
	font-variant: 		normal;
	color: #913117;
	}
pre code	{
	position:		relative;
	top:			0px;
	left:			1.2em;
	font-variant: 		normal;
	color: 			#913117;
	padding: 		0px;
	margin: 		0px;
		}
pre .lines	{
	position:		absolute;
	top:			1em;
	left:			0px;
	width:			1.2em;
	padding: 		0px;
	margin: 		0px 1.2em 0px 0px;
  	background: 		#913117;
	color: 			white;
	}

La técnica parece funcionar solamente en Mozilla y Opera. IE reemplazaba los saltos de linea por espacios así que lo he ignorado. Los demás navegadores degradan tranquilamente.

Como ya han comentado, en Mozilla hay un fallo que no permite la selección de bloques de código que están dentro de bloques de texto preformateado. He intentado añadir un fondo de color (solamente para Mozilla) al pasar el ratón por encima, porque así parece un poco más fácil de ver cómo poder seleccionar. Aparentemente, si empezamos la selección en el espacio que hay entre el texto preformateado y el bloque de código (el espacio en blanco entre los números y el código), se deja seleccionar.

Ayer por la noche pude acabar una modificación en el sistema de gestión de contenidos de este weblog, con la inestimable ayuda de Dan para solucionar una expresión regular. Gracias a eso, ahora los comentarios admiten las siguientes etiquetas: p, a, em, strong, pre, code.

Recomiendo que useis la etiqueta de párrafo para abrir y cerrar un bloque de párrafo, el texto quedará mejor. Si quereis añadir código en linea (dentro de un párrafo) simplemente usad la etiqueta code, el script se encargará de las entidades. Si por lo contrario quereis el código en un bloque aparte, que respete los saltos de línea, etc, podeis usar <pre><code>tu código</ code></pre> pero fuera de un párrafo (pre actua como bloque). Cualquier otra código o etiqueta que no esté dentro de code será destruida.

Acabo de hacer un pequeño script que aumenta el tamaño de todos los textarea de una página (incluyendo las páginas interiores de un frame) hasta los 450px de ancho y 250px de alto. Podeis guardarlo como favoritos y usarlo en vuestros gestores de contenidos o en esa típica página que te deja solamente 100 píxeles de ancho para escribir un mensaje. Para ejecutarlo aquí mismo, seguid este enlace. A mi me vendrá de perlas para escribir modificaciones en el phpMyAdmin. Como siempre, si te gusta el script, puedes encontrar más en la sección utilidades.

Detección de flash: métodos anteriores

He intentado descubrir un método que detecte en el servidor la versión instalada del plugin en el navegador, pero a pesar de que a macromedia no le costaría nada añadir la versión a la variable devuelta por el HTTP_ACCEPT, se empeña en obligarnos a usar lenguajes de cliente para detectarlo. Si tuviesemos esa opción podríamos gestionar el contenido alternativo desde el mismo servidor o añadir el método del flash satay sin temor alguno. El problema principal de esa técnica es que nevegadores con plugins antiguos no cargan el flash ni dejan ver el texto alternativo, y en menor medida, que no hace streaming, aunque para eso podemos usar una película lanzadera, como en mi anterior artículo. Además, algunos lectores me han comentado que el método de añadir flash con lanzadera no es suficientemente flexible (por ejemplo no permite pasar variables al flash) y casca en algunos navegadores (como mi Opera 7.23). Por esa razón he intentado un camino distinto.

Concepto

La idea es básicamente similar al concepto del sIFR: tener el contenio alternativo en algún elemento html, luego tener un script que detecte la versión del plugin en el navegador y si es la necesaria entonces sustituir el contenido alternativo por el objeto flash. La ventaja de este método, es que a diferencia de el 99% de los métodos habituales, si el navegador no tiene javascript o no puede cargar el objeto flash, el contenido alternativo sigue estando en el html, por lo cual la accesibilidad es alta. En cambio, en los otros métodos, el javascript se encarga de escribir en el documento el objeto flash y el contenido alternativo, que evidentemente resulta inaccesible en caso de no tener javascript activado. Así pues manos a la obra...

Método obsoleto en detrimento de este otro. Lo dejo aquí para mantener un archivo de cómo ha ido el tema.

El por qué

Hace poco estaba haciendo una web que tenía que ser accesible, pero que a la vez tenía un menú en flash. Como yo el flash nunca lo he usado hasta ahora empecé a investigar un poco y descubrí que casi todo el mundo pasa de dar contenidos alternativos al flash y lo peor de todo, inserta sus películas dentro de etiquetas object usando javascript para detectar la versión del plugin. Eso representa un grave problema de accesibilidad, puesto que los usuarios que no tengan javascript activado no podrán insertar la película y además no podrán leer el contenido alternativo (si lo hay).