Universidad de Costa Rica
Escuela de Ciencias de la Computación e Informática
CI-2413 Desarrollo de aplicaciones web
Profesor: Jeisson Hidalgo Céspedes
13-Setiembre-2011

Laboratorio 02

Este laboratorio pretende que el estudiante continúe familiarizándose con la escritura de documentos web en XHTML 1.0 utilizando la herramienta más básica: un editor de texto. El laboratorio está divido en dos partes, la primera ejercitar los elementos de texto, enlace y tabla en XHTML. La segunda, crear imágenes de dos tipos y asociarlas al documento XHTML creado en la primera parte.

El laboratorio iniciará en horas de clase y probablemente el estudiante lo finalizará en su casa. Se evaluará como la tarea 5 del curso.

Materiales

• Un editor de texto.
• El material de referencia del curso.
• La especificación formal HTML 4.01 del Consorcio Web
• El validador de contenido del Consorcio web.
• Un editor de imágenes escalares, como The Gimp.
• Un editor de imágenes vectoriales, como Inkscape.
• Un compresor de archivos.
• Varios navegadores web.

Procedimiento

Parte 1

Escriba su curriculum vitae en un documento XHTML válido.

1. Utilice un editor de texto de su agrado para escribir el código XHTML directamente. Cree un documento XHTML vacío.
2. [5%] Obtenga la siguiente información a partir de otro documento XHTML que haya hecho antes o escríbala manualmente:
   1. La declaración XML. Asegúrese de que la codificación usada y declarada coincidan.
   2. El tipo de documento XHTML 1.0 strict. Guíese con el material de referencia del curso.
   3. Un título significativo a su documento XHTML.
3. [5%] Escriba su nombre completo como un encabezado de nivel 1. Como niveles 2 las secciones: "Información personal", "Educación formal", "Experiencia laboral", y opcionalmente "Publicaciones" si las tiene.
4. [2%] Bajo su nombre, escriba que el documento se trata de un "currículo de vida" y la fecha de última modificación. Estos dos datos no deben ser parte del título.
5. [8%] En la sección de Información personal, escriba los siguientes detalles en una lista de definiciones (guíese con el material de referencia del curso por más información sobre este tipo de listas):
   • Identificación.
   • Fecha de nacimiento o edad.
   • Lugar de nacimiento.
   • Residencia actual.
   • Estado civil.
   • Teléfonos.
   • Correos electrónicos. Cada uno debe ser un enlace usando el esquema mailto.
6. [10%] Llene la sección Educación formal, con una tabla que tenga al menos las siguientes columnas:
   1. Fechas. El rango de años en que recibió la formación.
   2. Título. El título obtenido.
   3. Casa de enseñanza. El lugar donde obtuvo la formación académica.
7. [10%] Llene la sección Experiencia laboral, con una tabla que tenga al menos las siguientes columnas:
   1. Fechas. El rango de años en que realizó la labor.
   2. Lugar. El lugar o empresa donde realizó el trabajo.
   3. Cargo. Detalles sobre la labor realizada.
8. [10%] Asegúrese de que ambas tablas tengan un título con el elemento caption, y que la primera fila se componga únicamente de encabezados. Estudie la especificación HTML 4.01 sobre estos detalles de las tablas.
9. [5% opcional] Si tiene Publicaciones escriba los autores, título y demás detalles bibliográficos en una lista ordenada cronológicamente.
10. [5%] Para cada organización donde haya realizado estudios o haya laborado, y que tenga un sitio web, inserte un enlace, utilizando el nombre de la organización como contenido del enlace. Haga lo mismo con las publicaciones si están accesibles vía web.
11. [5%] Para evitar que un visitante que esté leyendo su currículo se aleje de su sitio web, haga que los enlaces anteriores se abran en una nueva ventana. Valide su documento. Haga algo para que sea válido y mantenga esta funcionalidad.

Parte 2

Provea un poco de imagen a su currículo de vida.

1. [15%] Antes de su nombre completo, inserte una imagen "tamaño pasaporte". Decida informadamente el formato de imagen a utilizar. Capture una fotografía suya o busque alguna reciente. Con un editor de imágenes haga un recorte de primer plano. Haga que la imagen ocupe el menor tamaño en disco posible sin verse mal. Inserte su imagen en el currículo y, ajuste los atributos ancho y el alto del elemento img al exacto que tiene la imagen.
2. Experimente cuadruplicando las dimensiones en los atributos del elemento img que hace referencia a su fotografía. ¿Qué hace internamente el navegador? ¿Qué pasa con la calidad de la imagen?
3. [20%] Con un editor de imágenes vectorial, cree una ilustración que represente la línea de tiempo de su vida. En ella resalte los eventos de su educación formal, experiencia laboral y publicaciones, si las tiene. Su imagen debe ser completamente vectorial. Asóciela a su hoja de vida XHTML con un elemento de img. Asegúrese de no dejar espacio en blanco innecesario en los bordes de la imagen. Asigne las dimensiones correctas en los atributos del elemento img.
4. Experimente cuadruplicando una o las dos dimensiones en los atributos del elemento img que referencia su línea del tiempo. ¿Qué hace internamente el navegador? ¿Qué pasa con la calidad de la imagen?
5. [5%] Asegúrese de que su documento XHTML sea válido.

Evaluación

Los porcentajes entre corchetes que aparecen en el Procedimiento indican el peso de cada actividad en la evaluación.

Comprima su archivo XHTML y las imágenes que haya usado. Súbalos a la plataforma educativa (Moodle) de la ECCI, en la asignación con título Tarea05.