Últimamente me ha tocado modificar el código de la Secretaría Virtual de MU para darle una apariencia más moderna y acorde con el estilo de la nueva web de la universidad, y hacer que funcione con todos los navegadores (por lo menos con los más extendidos).
En un primer momento, se especificó que la Secretaría Virtual debía funcionar con Internet Explorer. La empresa contratada para hacer el desarrollo utilizó código javascript que solo es válido para Internet Explorer, por lo que algunos apartados no funcionaban con otros navegadores.
Los problemas
El que haya hecho algún desarrollo de javascript, se ha encontrado con document.all. Es una colección de todos los elementos de la página, con lo que de una manera fácil podemos acceder a las propiedades de cada uno de ellos. Es una pena que no funcione en todos los navegadores.
Otra colección de elementos muy utilizada es document.formulario, donde formulario es el nombre de un elemento <form> de la página HTML. Esto tampoco lo soportan todos los navegadores.
Y por último, etiquetas <a> que contienen filas de tablas, formando una estructura como esta:
<a onclick=”ejecutame();”>
<tr>
<td>contenido celda</td>
<td>contenio de otra celda</td>
</tr>
</a>
Principalmente me he topado con estos 3 problemas a la hora de hacer funcionar la Secretaría Virtual con otros navegadores.
Las soluciones
document.all es una colección para acceder a los elementos de la página, por lo que las opciones lógicas para sustituir document.all.elemento son document.getElementById(“elemento”) o document.getElementsByName(“elemento”). La primera opción nos devuelve el elemento con el identificador que pasemos como parámetro. La segunda opción, nos devuelve un array con todos los elementos que tengan el nombre que pasemos como parámetro. Dependiendo de la situación, la solución elegida será una u otra.
Con document.formulario pasa algo parecido. Es una colección de todos los elementos que contiene un formulario. Las apariciones de document.formulario.elemento hay que sustituirlas por document.forms.formulario.elements[“elemento”]. Hay otro modo de uso, ya que document.forms es también un array con todos los formularios de la página, por lo que se puede referenciar el formulario como document.forms[0] o document.forms[1]. El array elements se puede utilizar como un array indexado por número o como un array indexado por valor (como en el ejemplo anterior).
Aunque en Internet Explorer la estructura
<a onclick=”ejecutame();”>
<tr>
<td>contenido celda</td>
<td>contenio de otra celda</td>
</tr>
</a>
genera una página que hace lo que queremos, en otros navegadores no funciona porque esa estructura no cumple las especificaciones de HTML (no puede haber un enlace fuera de una celda de una tabla, y mucho menos un enlace que contenga la fila entera de la tabla). En este caso la solución es muy sencilla: eliminar las etiquetas <a> y </a>, y pasar el evento onclick a la fila. El código correcto es algo así:
<tr onclick=”ejecutame();”>
<td>contenido celda</td>
<td>contenio de otra celda</td>
</tr>
Conclusiones
Mientras he ido haciendo este trabajo, me he dado cuenta de un par de cosas:
- Con un mejor diseño de la aplicación y un uso racional de funciones y procedimientos se simplifica el mantenimiento posterior.
- En lo que a javascript se refiere, es mejor hacer el desarrollo de javascript pensando en que se va a utilizar en múltiples navegadores y respetando las recomendaciones de los estándares, que adaptarlo más tarde.
Parafraseando al cerdito de los dibujos, “eso es to, eso es to, eso es to to todo, amigos”.
