You are currently browsing the tag archive for the ‘HTML’ tag.
En una página web, se cargan muchas veces las opciones de un elemento SELECT de forma dinámica. Una forma de hacerlo es asignar un nuevo valor al atributo innerHTML. Desgraciadamente esto no funciona con el navegador Internet Explorer.
El atributo innerHTML no es estándar en Javascript, pero todos los navegadores suelen saber interpretarlo como el código HTML entre la etiqueta de inicio y del fin; es decir, el texto entre <SELECT> y </SELECT>. Es un atributo tan poderoso y tan fácil de entender, que cuesta aceptar que el Internet Explorer no lo entiende para un elemento como SELECT, que tantas veces carga un contenido dinámico.
Me imagino que todos los programadores de páginas web se ha estropeado con este problema alguna vez – unos como yo incluso varias veces por no haberse apuntado una nota sobre esta trampa. Espero que este artículo sirva de acortar las penurias de los más prójimos.
Echamos un vistazo al elemento SELECT y los dos botones «Cambiar innerHTML» y «Cambiar outerHTML». Como este sitio web no permite incluir Javascript, no puedo incluir el ejemplo directamente en el artículo. Para probar y jugar se puede copiar el siguiente código en un fichero vacío, nombrarlo «select.html» y abrirlo en un navegador.
<div style="border: 1pt solid silver; text-align: center;">
<script type="text/javascript">
function changeInnerHtml()
{
mi_select = document.getElementById("mi_select");
mi_select.innerHTML =
"<option>Valor modificado por innerHTML</option>";
}
function changeOuterHtml()
{
mi_select = document.getElementById("mi_select");
mi_select.outerHTML = "<select id='mi_select'>" +
"<option>Valor modificado por outerHTML</option>" +
"</select>";
}
</script>
<select id="mi_select">
<option>Valor inicial</option>
</select>
<br>
<input type="submit" value="Cambiar innerHTML" onClick="changeInnerHtml();">
<input type="submit" value="Cambiar outerHTML" onClick="changeOuterHtml();">
</div>
Inicialmente el elemento SELECT contiene una opción con el texto «Valor inicial». Pulsando uno de los dos botones se cambia el contenido del elemento SELECT por una opción «Valor modificado». Podemos elegir entre dos estrategias:
- Cambiar el atributo
innerHTML, es decir, el texto entre las etiquetas<SELECT>y</SELECT>o - Cambiar el atributo
outerHTMLque es el código que incluye las etiquetas de inicio y fin del elemento SELECT.
Podemos pulsar estos botones sin miedo – para reiniciar las opciones del elemento SELECT recarga la página.
Dependiendo del navegador que usamos, estos botones funcionan o no. En Mozilla Firefox, por ejemplo, el botón «Cambiar outerHTML» no tiene efecto, ya que el navegador desconoce el atributo outerHTML. Igual que innerHTML, el atributo outerHTML no es estándar tampoco. Sin embargo, Internet Explorer lo reconoce.
En versiones anteriores de Internet Explorer el elemento SELECT aparece vacío tras cambiar su atributo innerHTML.
Microsoft está consciente del problema (ya desde la versión veterana 5 del Internet Explorer) y ha propuesto varias alternativas en su comunicado Error de Internet Explorer establecer la propiedad del objeto seleccionar innerHTML. (Este es el título que fue calculado por el traductor automático en su momento. El título en inglés es «BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object».)
Parece que se ha «resuelto» este problema en la versión 8: Ahora cambiar el atributo innerHTML no hace nada y se muestra en la lista de errores el mensaje: «El objeto no acepta esta propiedad o método.»
Desgraciadamente no es una solución satisfactoria tampoco y no hay más remedio que utilizar una de la propuestas en el artículo mencionado arriba. Para hacer la elección más fácil, la versión 8 de Internet Explorer trata el atributo outerHTML igual como el atributo innerHTML. Es decir, no funciona – igual como en Mozilla Firefox donde nunca funcionó.
En conclusión, la única solución será añadir las opciones de una en una al
elemento SELECT. En este contexto vale echar un ojo a JSON (JavaScript
Object Notation) antes de componer un bucle de Javascript mediante PHP u otro lenguaje de servidor.
Otra opción, desde luego, es usar un navegador como Opera. Este programa entiende ambas propiedades: innerHTML y outerHTML.
Referencias
Directamente relacionado con este artículo:
- Error de Internet Explorer al asignar la propiedad innerHTML del objeto SELECT
- Documentación de HTML del elemento SELECT
- Especificación de HTML 4.01
Información adicional:
- JavaScript Object Notation (JSON)
- PHP
Páginas web de los navegadores mencionados:
Artículos sobre HTML en este blog:
Cuando tenemos una tabla dentro de un texto, muchas veces nos parece lo más bonito de colocarla centrada. Sin embargo, hay una diferencia entre navegadores a la hora de colocar una tabla en el centro de la línea. No es posible conseguirlo únicamente con atributos de estilo. Es necesario especificar el atributo align de la tabla.
El siguiente código es una tabla dentro un elemento DIV con alineamiento centrado:
<div style="border: 1pt solid #fbb; text-align: center;"> Una tabla con una celda <table border="1"> <tr> <td>Una celda</td> </tr> </table> </div>
Esto aparece en el navegador así:
Una tabla con una celda
| Una celda |
Si tienes abierto este artículo en Mozilla Firefox o Opera, entonces la tabla se encuentra alineado a la izquierda. Si lo tienes abierto en Internet Explorer, entonces la tabla se encuentra centrada – aunque no dentro de este artículo (el autor de CSS de WordPress sabrá como). Hay que copiar el código en un fichero HTML vacío para ver este efecto.
Para poder centrar la tabla en los otros navegadores, es imprescindible de usar el atributo align:
<div style="border: 1pt solid #bfb;"> Otra tabla con una celda <table border="1" align="center"> <tr> <td>Una celda</td> </tr> </table> </div>
El navegador muestra este código así:
Otra tabla con una celda
| Una celda |
Esta representación aparece con el mismo alineamiento en todos los navegadores.
Referencias
La primera tarea del sistema de documentación automatizado doxygen es la creación de un manual de referencia del código del programa. Sin embargo, doxygen ofrece también la funcionalidad de añadir un texto libre. Por la capacidad de doxygen de entender etiquetas de HTML, podemos editar un documento HTML con un editor aparte y luego integrarlo en la documentación generada con doxygen. Esto nos trae la ventaja de poder entregar una documentación completa y actualizada con cada ejecución de doxygen.
Creación de documentación libre
Doxygen conoce varias etiquetas para la creación de documentación libre. En primer lugar están las etiquetas \mainpage, \page y \subpage para la creación y la estructuración de páginas independientes. Dentro de cada página podemos estructurar el texto en apartados con las etiquetas provenientes LaTeX: \section, \subsection, \subsubsection y \paragraph. Conviene guardar la documentación libre en un fichero aparte por no tener correspondencia a ninguna entidad de código en concreto. El sufijo previsto para estos ficheros es dox, es decir, podemos crear una carpeta «doc» o «dox» que incluye todos los ficheros fuente que contienen documentación pero ninguna línea de código ejecutable.
Las etiquetas mencionadas arriba deben encontrarse dentro de un comentario de documentación. Lo más conveniente en este caso es abrir el comentario con /** o /*! en la primera línea y cerrarlo con */ en la última. Doxygen no exige iniciar una línea en medio con *. Ver la documentación de doxygen para un ejemplo.
Lo normal sería escribir la documentación libre en un fichero de texto, pero como ya he mencionado, en este artículo queremos averiguar, si podemos utilizar fuentes escritos en HTML. Dentro de lo que cabe tenemos dos estrategias para usarlas:
- Crear un documento HTML que doxygen lee y interpreta como un fichero fuente, es decir, un fichero .dox, y
- integrar un documento HTML externo
Ambas maneras tienen ventajas y desventajas que detallaremos a continuación.
Procesar HTML como fichero fuente
Podemos crear un fichero HTML y dejarlo procesar por doxygen como si fuera un fichero fuente. Doxygen entiende la mayoría de las etiquetas de HTML. Las que no entiende son en primer lugar etiquetas de contenido dinámico como OBJECT o EMBED. Esto no es de extrañar ya que doxygen no es un navegador de Internet sino una herramienta de documentación. Lo que duele más que tampoco entiende las etiquetas de cabecera. A contrario de lo que diga la documentación, la versión 1.7.1 que yo probé, no reconoce nada de lo que aparece entre <HEAD> y </HEAD> y tampoco la etiqueta BODY. Estas etiquetas aparecen entonces como cualquier texto normal.
Doxygen tampoco reconoce el comentario de HTML <– –>. Por lo tanto no podríamos esconder la apertura del comentario de documentación /** dentro de un comentario para que no nos aparezca si abrimos el fichero HTML en un navegador. En fin, no es posible crear un documento HTML que queda perfecto tanto en un navegador y en el resultado de doxygen a la vez. Todavía necesitamos un poco de trabajo manual:
Creamos un fichero dox que contiene algo como lo siguiente
/** \page mi_pagina_html Mi página en HTML <h1>Soy un título</h1> <p>En esta página podemos hablar de asuntos <em>muy</em> importantes.</p> */
Entre la primera y la última línea copiamos todo lo que se encuentra entre las etiquetas <BODY> y </BODY> en el documento HTML. (En este caso sólo he puesto dos líneas.)
La ventaja de esta manera es que doxygen crea una salida homogénea con las otras partes de la documentación. Más interesante aún es que doxygen enlaza los nombres de identificadores con la referencia correspondiente. De esta manera podemos, por ejemplo, crear un manual de usuario de una biblioteca en que aparecen automáticamente las enlaces al manual de referencia de los objetos de que estamos hablando.
Incluir un documento HTML
A veces los documentos HTML no son tan simples para que podamos usarlo directamente con doxygen. Puede haber varias razones. Por ejemplo:
- El documento HTML se quiere usar tal cual como una página de Internet.
- El documento usa una hoja de estilo u otros enlaces. En este caso y el anterior no podemos quitar la cabecera.
- El documento usa contenido dinámico con Javascript.
- El documento usa contenido empotrado como vídeos o animaciones flash.
En todos estos casos no queremos perder las características del propio HTML. Lo que podemos hacer es crear un pequeño fichero dox con el contenido siguiente:
/** \page mi_otra_pagina_html Mi otra página HTML \htmlinclude "mi_fichero.html" (Este documento sólo está disponible en la versión HTML de la documentación.) */
Con esta fuente, doxygen crea una página en que incluye el documento HTML «mi_fichero.html», pero sólo para la versión HTML de la documentación. Desgraciadamente no existe una etiqueta en doxygen, con que podemos escribir algo en todos los formatos menos HTML. Así aparece una página prácticamente vacía en los demás formatos. Sólo se ve la frase «(Este documento sólo está disponible en la versión HTML de la documentación.)«. Esta frase aparece también al final del documento HTML, pero visualmente se impone menos. Existen también comandos exclusivos para otros formatos como \latexonly, pero no podrán sustituir el contenido dinámico de una página HTML, desde luego.
Debemos añadir el directorio, donde guardamos los ficheros HTML a incluir, al EXAMPLE_PATH de la configuración de doxygen. Si no es posible que doxygen no encuentra los ficheros que incluimos.
La ventaja de incluir un documento HTML de esta manera es poder usarlo sin modificación y aprovecharse de toda la potencia que una página WEB ofrece. La desventaja es que doxygen no enlaza nombres de identificadores con el manual de referencia y en los formatos no HTML no aparece ningún su contenido. Sin embargo, en muchos casos esto no supone un problema, ya que no se crea una documentación en otro formato que HTML.
Una aplicación de este truco puede ser la inclusión de un manual de usuario u otro texto libre. Se puede escribir en un editor como Microsoft Word y guardarlo como una página HTML. Luego se incluye esta página mediante \htmlinclude en la documentación de doxygen. Así es posible mantener una documentación completa y actualizada en todo momento.
Una cosa que, por cierto, no funciona es usar el comando \link a un fichero interno para crear un enlace a este documento HTML en la documentación. El enlace, sí, estará en la documentación creada por doxygen, pero no el fichero que enlaza. Esto sólo se puede hacer para documentos con una URL de Internet pública.
Conclusión
Hemos visto dos maneras de incluir documentación adicional al manual de referencia que doxygen crea a partir del código. La capacidad de doxygen de interpretar muchas etiquetas HTML permite incluir documentos escritos en HTML en la documentación. Es una buena opción para documentos no interactivos. Para páginas HTML más complejos se ofrece incluir la página tal cual mediante \htmlinclude, que mantiene toda la potencia de una página interactiva, pero a coste de no poder verlo en los demás formatos que doxygen puede crear.
Referencias
- Las ventajas de utilizar un sistema de documentación automatizada
- Usar doxygen con acentos
- Página del proyecto doxygen
Trucos informáticos 