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).