\u00daltimamente me ha tocado modificar el c\u00f3digo de la Secretar\u00eda Virtual de MU para darle una apariencia m\u00e1s 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\u00e1s extendidos).<\/p>\n
En un primer momento, se especific\u00f3 que la Secretar\u00eda Virtual deb\u00eda funcionar con Internet Explorer. La empresa contratada para hacer el desarrollo utiliz\u00f3 c\u00f3digo javascript que solo es v\u00e1lido para Internet Explorer, por lo que algunos apartados no funcionaban con otros navegadores.<\/p>\n
Los problemas<\/strong><\/p>\n El que haya hecho alg\u00fan desarrollo de javascript, se ha encontrado con document.all<\/em><\/strong>. Es una colecci\u00f3n de todos los elementos de la p\u00e1gina, con lo que de una manera f\u00e1cil podemos acceder a las propiedades de cada uno de ellos. Es una pena que no funcione en todos los navegadores.<\/p>\n Otra colecci\u00f3n de elementos muy utilizada es document.formulario<\/strong><\/em>, donde formulario<\/em> es el nombre de un elemento <form><\/em> de la p\u00e1gina HTML. Esto tampoco lo soportan todos los navegadores.<\/p>\n Y por \u00faltimo, etiquetas <a> <\/em>que contienen filas de tablas, formando una estructura como esta:<\/p>\n <a onclick=”ejecutame();”> Principalmente me he topado con estos 3 problemas a la hora de hacer funcionar la Secretar\u00eda Virtual con otros navegadores.<\/p>\n Las soluciones<\/strong><\/p>\n document.all<\/em> es una colecci\u00f3n para acceder a los elementos de la p\u00e1gina, por lo que las opciones l\u00f3gicas para sustituir document.all.elemento<\/em> son document.getElementById(“elemento”)<\/em> o document.getElementsByName(“elemento”)<\/em>. La primera opci\u00f3n nos devuelve el elemento con el identificador que pasemos como par\u00e1metro. La segunda opci\u00f3n, nos devuelve un array con todos los elementos que tengan el nombre que pasemos como par\u00e1metro. Dependiendo de la situaci\u00f3n, la soluci\u00f3n elegida ser\u00e1 una u otra.<\/p>\n Con document.formulario<\/em> pasa algo parecido. Es una colecci\u00f3n de todos los elementos que contiene un formulario. Las apariciones de document.formulario.elemento<\/em> hay que sustituirlas por document.forms.formulario.elements[“elemento”]<\/em>. Hay otro modo de uso, ya que document.forms<\/em> es tambi\u00e9n un array con todos los formularios de la p\u00e1gina, por lo que se puede referenciar el formulario como document.forms[0]<\/em> o document.forms[1]<\/em>. El array elements<\/em> se puede utilizar como un array indexado por n\u00famero o como un array indexado por valor (como en el ejemplo anterior).<\/p>\n Aunque en Internet Explorer la estructura<\/p>\n <a onclick=”ejecutame();”> genera una p\u00e1gina 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\u00f3n es muy sencilla: eliminar las etiquetas <tr onclick=”ejecutame();”> Conclusiones<\/strong><\/p>\n Mientras he ido haciendo este trabajo, me he dado cuenta de un par de cosas:<\/p>\n Parafraseando al cerdito de los dibujos, “eso es to, eso es to, eso es to to todo, amigos”.<\/p>\n","protected":false},"excerpt":{"rendered":" A la hora de enriquecer nuestras p\u00e1ginas con javascript, podemos encontrarnos con que no funcionan en cualquier navegador. Esta es nuestra experiencia adecuando el c\u00f3digo javascript de la Secretar\u00eda Virtual de MU.<\/p>\n","protected":false},"author":54,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[76,77,75,74],"series":[],"yoast_head":"\n
\n<tr>
\n<td>contenido celda<\/td>
\n<td>contenio de otra celda<\/td>
\n<\/tr>
\n<\/a><\/p><\/blockquote>\n
\n<tr>
\n<td>contenido celda<\/td>
\n<td>contenio de otra celda<\/td>
\n<\/tr>
\n<\/a><\/p><\/blockquote>\n<a><\/code> y <\/a><\/code>, y pasar el evento onclick a la fila. El c\u00f3digo correcto es algo as\u00ed:<\/p>\n
\n<td>contenido celda<\/td>
\n<td>contenio de otra celda<\/td>
\n<\/tr><\/p><\/blockquote>\n\n