Universidad de Costa Rica
Escuela de Ciencias de la Computación e Informática (ECCI)
CI-2413. Desarrollo de aplicaciones web
Profesor: Jeisson Hidalgo Céspedes
18 de noviembre de 2011

Examen 03

El examen es de carácter práctico y debe realizarse en una computadora con acceso al web. El estudiante puede disponer de cualquier recurso o referencia que guste, sean hechos durante el curso, estén disponibles en Internet, o en libros. Se dispone de dos horas para entregar la prueba, a lo sumo tres, y debe realizarse en forma individual.

Un concepto indispensable que el autor necesita a la hora de trabajar con documentos extensos es el de referencia cruzada. Una referencia cruzada (en inglés, cross reference) es un trozo de información que hace referencia a otra parte del mismo documento o de uno externo. En el web, el concepto más cercano a referencia cruzada es el hiperenlace. Sin embargo, el autor requiere más funcionalidad automatizada como sí ocurre en la mayoría de procesadores de palabras.

Por ejemplo, imagine que usted está escribiendo un libro en (X)HTML sobre un tema que le apasiona. Suponga que ha escrito unos siete capítulos y ha incluido un centenar de imágenes. Desde el texto usted necesita hacer referencia a las imágenes, para explicarlas al lector, por lo que ha decidido numerarlas con dos cifras, por ejemplo, la "Figura 4.11" hace referencia a la undécima figura que aparece en el capítulo 4:

<body>
    [...]
    <p>[...] como se aprecia en la Figura 4.11 utilizando diagramas de actividad.</p>
    <div class="figura">
        <img src="apc.svg" alt="Algoritmo para obtener la pomada canaria"/>
        <div class="caption">Figura 4.11. Algoritmo para obtener la pomada canaria</div>
    </div>
    [...]
</body>

Si usted hace esta numeración manualmente, le será un hastío cuando tenga que insertar una nueva figura, ya que tendrá que actualizar la numeración y referencias de todas las subsecuentes imágenes en el capítulo. Si quiere hacerlo automáticamente, encontrará que (X)HTML no provee un mecanismo estándar, sino que tendrá que programarlo, lo cual es responsabilidad de JavaScript.

Implemente una pequeña biblioteca JavaScript (un archivo con nombre xref.js) que al ser incluida en un documento, actualiza automáticamente las referencias cruzadas que en éste se encuentran. Naturalmente el código JavaScript necesita alguna pista para localizar en el documento las referencias cruzadas y los objetos referidos. Sin embargo, su biblioteca debe mantener al mínimo la redundancia que el autor debe proveer para hacer funcionar este mecanismo. Para efectos de este examen, su biblioteca debe trabajar con la solución ejemplificada en lo siguiente.

<div class="chapter">[...]</div>
<div class="chapter">[...]</div>
<div class="chapter">[...]</div>
<div class="chapter">
    <div id="fig_arqweb" class="Figura">
        <img src="img/algo.png" alt="Una imagen"/>
        <div class="xref_caption">Esta es la primera imagen del capítulo</div>
    </div>
    [...]
    <div id="ej_mathml" class="Listado">
        <pre class="prettyprint lang-xml">
            [...]
        </pre>
        <div class="xref_caption">Cálculo de la pendiente en una función líneal.</div>
    </div>

    <p>El <a class="xref">ej_mathml</a> muestra la representación en MathML del cálculo
    de la pendiente en una función lineal, y la <a class="xref">fig_mathml</a> cómo se
    visualiza en el navegador Firefox. Los demás navegadores carecen en algún grado en la
    implementación del estándar MathML como se explica en la <a class="xref">tab_mathml</a>.</p>

    <div id="fig_mathml" class="Figura">
        <img src="img/mathmlff.png" alt="MathML en Firefox"/>
        <div class="xref_caption">Fórmula MathML visualizada en Firefox</div>
    </div>

    <div id="tab_mathml" class="Tabla">
        <table>
            <thead><tr><th>Navegador</th><th>Porcentaje</th><th>Detalles</th></tr></thead>
            <tbody><tr><td>[...]</td><td>00%</td><td>[...]</td></tr></tbody>
        </table>
        <div class="xref_caption">Nivel de implementación de MathML en navegadores.</div>
    </div>
</div>

Su solución debe actualizar todas las referencias cruzadas que pertenecen a la clase xref, como las tres que aparecen las líneas 17, 18 y 20 del listado anterior. Actualizar una referencia cruzada significa actualizar el atributo href del enlace, y reemplazar su contenido por la clase del elemento referido, seguido por un número generado automáticamente, el cual incluye el número del capítulo. Si el trozo de texto anterior estuviera en el capítulo 4, la salida de su solución JavaScript debería ser la siguiente:

<div class="chapter">[...]</div>
<div class="chapter">[...]</div>
<div class="chapter">[...]</div>
<div class="chapter">
    <div id="fig_arqweb" class="Figura">
        <img src="img/algo.png" alt="Una imagen"/>
        <div class="xref_caption">Figura 4.1 Esta es la primera imagen del capítulo</div>
    </div>
    [...]
    <div id="ej_mathml" class="Listado">
        <pre class="prettyprint lang-xml">
            [...]
        </pre>
        <div class="xref_caption">Listado 4.1 Cálculo de la pendiente en una función líneal.</div>
    </div>

    <p>El <a class="xref" href="#ej_mathml">Listado 4.1</a> muestra la representación en MathML del
    cálculo de la pendiente en una función lineal, y la <a class="xref" href="#fig_mathml">Figura 4.2</a>
    cómo se visualiza en el navegador Firefox. Los demás navegadores carecen en algún grado en la
    implementación del estándar MathML como se explica en la <a class="xref" href="#tab_mathml">Tabla 4.1</a>.</p>

    <div id="fig_mathml" class="Figura">
        <img src="img/mathmlff.png" alt="MathML en Firefox"/>
        <div class="xref_caption">Figura 4.2 Fórmula MathML visualizada en Firefox</div>
    </div>

    <div id="tab_mathml" class="Tabla">
        <table>
            <thead><tr><th>Navegador</th><th>Porcentaje</th><th>Detalles</th></tr></thead>
            <tbody><tr><td>[...]</td><td>00%</td><td>[...]</td></tr></tbody>
        </table>
        <div class="xref_caption">Tabla 4.1 Nivel de implementación de MathML en navegadores.</div>
    </div>
</div>

Su solución será evaluada considerando lo siguiente.

[25%] Debe convertir las referencias cruzadas <a class="xref">id_element</a> por enlaces válidos hacia sus correspondientes elementos.
[25%] Inserta el rótulo (caption) en el elemento con clase xref_caption, por ejemplo. Idealmente resaltarlo con un elemento strong.
[20%] Hace el paso anterior aún en elementos que no son referidos dentro del texto. Por ejemplo, si el autor incluye una imagen a la cual no hace referencia, su solución la enumera como cualquier otra.
[20%] Debe permitir al autor escoger sus rótulos con el atributo class de los elementos referidos. Su solución no debe funcionar únicamente con los rótulos Listado, Figura y Tabla, sino, con cualquier rótulo escogido arbitrariamente por el autor, como va a ocurrir, por ejemplo, si el documento se traduce a otro idioma.
[5%] Si se escribe una referencia cruzada hacia un elemento que no existe, su solución mantiene el contenido original de la referencia, y podría resaltarla (en rojo) para indicarle al autor que algo está mal.
[5%] Al incluir su archivo xref.js no se debe hacer ninguna alteración en el documento para que actualice las referencias cruzadas.

Como prueba su solución debe ser capaz de actualizar las referencias cruzadas del material de apoyo del curso. Para entregar su solución, suba el archivo xref.js a la Plataforma Educativa de la ECCI, en la asignación "Examen03".