Trabajo evaluable de HTML y CSS

Presentación

Llegados a este punto del curso, en el que las bases de HTML y CSS deberían haber quedado sentadas, y antes de adentrarnos en el lenguaje de programación JavaScript, una nueva herramienta que nos proporcionará mucha mayor flexibilidad a la hora de especificar el comportamiento de nuestras webs multimedia, conviene fijar conceptos y adquirir soltura en el manejo de las herramientas previamente presentadas. Pensamos que lo mejor para conseguirlo es que os enfrentéis ya, sin postergarlo más, a problemas concretos de una entidad moderada y, para motivaros a ello, hemos decidido plantear uno de tales problemas (ya esbozado en clase) como trabajo evaluable de la asignatura, con un plazo de realización breve e improrrogable. En particular, no habrá un nuevo plazo ni siquiera en segunda convocatoria.

Ejercicio

Requisitos básicos

El ejercicio que se propone consiste en construir con HTML5 y CSS3 (sin JavaScript) una galería de seis o más imágenes, inicialmente dispuestas en círculo como miniaturas y sensibles al ratón de forma que en cada momento se pueda elegir una que entonces, mediante una transición gradual, pase a mostrarse de forma destacada (al menos en tamaño) y con su orientación natural en el centro exacto del círculo. El posicionamiento de las miniaturas sobre el perímetro del círculo ha de ser preciso, sus centros deben quedar equiespaciados y la rotación de cada una de ellas debe hacer que la mediatriz de su base pase por el centro del círculo.
La forma principal de elegir imágenes será haciendo clic con el ratón. Como este comportamiento se consigue haciendo uso de la pseudoclase :focus y requiere dotar de atributos tabindex a los elementos que alberguen las imágenes de la galería, se debe dotar al conjunto de un orden de tabulación razonable que recorra todas las imágenes en sentido horario a partir de las doce (o bien prohibir, con tabindex=-1, el acceso a las imágenes mediante tabulador).
Además, la galería debe formar parte de un contenedor y quedar centrada en él, tras un título y un párrafo explicativo que deben quedar visualmente fuera de ese contenedor por estar también fuera en la estructura HTML de la página.
Y se exige que el código HTML de la página sea declarado válido por html5.validator.nu (o se habrá de justificar que los errores detectados no son tales).

Detalles técnicos adicionales

Algunos detalles técnicos que se pueden valorar positivamente son los siguientes:
  • Independencia de la hoja de estilo, ubicada en fichero aparte.
  • Codificación reutilizable que, aparte de conseguir que cada una de las imágenes se muestre siempre centrada, horizontal y verticalmente, dentro de un elemento cuadrado o rectangular propio de un tamaño igual para todas, haga trivial sustituir las imágenes de la galería por otras (posiblemente con otros tamaños y otras proporciones originales) sin perder ese centrado. Obviamente, también hay que conseguir que la forma en la que se muestre cada imagen respete siempre sus proporciones originales.
  • Transiciones más complejas que las del ejemplo (donde todas las propiedades se modifican al mismo ritmo lineal), siempre que el efecto conseguido con ello sea razonable.
  • Empleo razonable de otras propiedades CSS como bordes, colores, sombras...
Sin embargo, y para evitar perder el tiempo replicando para diferentes navegadores declaraciones CSS que afecten a propiedades experimentales, no se valorará el hecho de preparar la galería para funcionar en varios navegadores. Se debe elegir uno entre Chrome, Firefox y Opera y especificar con cuál (indicando también la correspondiente versión) se ha comprobado el correcto funcionamiento de la galería.
Por otra parte, se valorará negativamente cualquier empleo inadecuado de elementos HTML o propiedades CSS y, en particular:
  • La utilización de HTML para controlar aspectos visuales que deberían especificarse en la hoja de estilo.
  • La omisión de <!doctype html> o elementos estructurales importantes como html, head, title, body, header o h1.
  • El empleo de reglas CSS con selectores redundantes como en el par div.container, div.container:hover.

Ubicación de la galería

Todos los ficheros de la galería (un documento HTML index.html, la hoja de estilo y el directorio con las imágenes) deben ubicarse dentro de un directorio Galeria en la cuenta personal UJI de alguno de los autores del trabajo, con los permisos adecuados y en una ubicación que permita a la galería quedar públicamente accesible en un URL del dominio www4.uji.es.

Recursos

Como punto de partida sobre el que empezar a trabajar cabe sugerir el ejemplo 3.15 del libro The Definitive Guide to HTML5 Video, de Silvia Pfeiffer, del que la biblioteca de la UJI adquirió algunos ejemplares, en inglés y en castellano. Podéis encontrar otras fuentes de información adicional en las páginas enlazadas desde las webs que los profesores mantenemos para esta asignatura (aquí y aquí) y en diversos libros de la biblioteca (como los que se citan en el LLEU). También podéis buscar información en la Web (a veces conviene restringir las búsquedas en Google con site:w3.org) y, por supuesto, dirigir consultas a los profesores.

Grupos de trabajo

El trabajo, original, se desarrollará en grupos de dos personas aunque, en casos excepcionales, se podrá llevar a cabo de forma individual, tras exponer el caso al correspondiente profesor de prácticas. Ha de tenerse en cuenta, sin embargo, que el nivel de exigencia será el mismo para trabajos individuales o por parejas. Y, obviamente, en ningún caso se aceptarán trabajos presentados por más de dos autores. Por otra parte, todos los miembros del grupo deberán poder explicar cualquier aspecto del trabajo presentado y ser capaces de modificar la galería en el sentido que se les pida en una eventual entrevista de control con el profesor de prácticas.
Cada grupo ha de comunicar cuanto antes su composición al correspondiente profesor de prácticas, de forma que no quede duda de que ambos miembros están de acuerdo en formarlo. Esto puede hacerse presencialmente (en clase o en tutorías) o mediante correo electrónico desde la cuenta UJI de uno de los miembros con copia a la del otro. Entonces, el profesor contestará al grupo indicándole el número concreto de imágenes que han de mostrarse en su galería.

Evaluación

Puntuación

Con este trabajo, cada alumno puede sumar hasta 2 puntos a su nota de prácticas NP (véase el temario de la asignatura en el LLEU). De estos 2 puntos, obtener al menos 1 garantiza seguir aspirando a la máxima nota NP, que se calculará como suma de notas de trabajos pero con un tope de 10 aplicado al resultado final de esa suma, que podría ser mayor.
Volviendo a los 2 puntos de este trabajo, se desglosan del siguiente modo:
  • 0,5 puntos por ubicar correctamente las miniaturas de la galería.
  • 0,5 por hacerlas sensibles al ratón y conseguir las correspondientes transiciones correctas.
  • 0,5 por ubicar correctamente la galería en un contenedor.
  • 0,5 por otros detalles técnicos.
Y, obviamente, no respetar escrupulosamente cualquier otro requisito del trabajo (técnico o formal) supondría una penalización en su calificación que intentaríamos ajustar a la magnitud de la falta.

Entrega

Una vez acabada la galería, y antes de que concluya el plazo de entrega, fijado para las 23.55 del próximo 14 de noviembre, lunes, debéis hacer lo siguiente:
  1. Comprobad una vez más el correcto funcionamiento de la galería, mediante el URL de www4.uji.es que hayáis elegido, en el navegador que hayáis utilizado durante el desarrollo.
  2. Descargad este fichero de texto, que contiene una lista de preguntas: entrega-puntuable-1.txt.
  3. Añadid las correspondientes respuestas y copiad el entrega-puntuable-1.txt resultante a vuestro directorio Galeria antes de abordar el siguiente paso.
  4. Empaquetad como ZIP o TGZ el directorio Galeria (recordad: incluyendo entrega-puntuable-1.txt) y ya no volváis a tocar ese directorio hasta que finalice el proceso de evaluación.
  5. Entregad Galeria.zip o Galeria.tgz del modo elegido por vuestro profesor, que es el siguiente:

Entrevista de control

Finalmente, vuestro profesor de prácticas podrá pediros una entrevista para asegurarse de que no sólo sois los autores de lo que habéis entregado, sino que entendéis perfectamente todo lo que habéis hecho.