Examen 01

Suponga que una organización ficticia quiere construir una comunidad virtual con material educativo, como manuales, ejercicios y similares, para el aprendizaje electrónico (e-learning). La organización está celebrando un concurso para escoger los futuros desarrolladores, el cual consiste en crear una página web modelo del futuro sitio, con ciertos lineamientos. Las instrucciones del concurso son las siguientes.

0. Descargar el material de contenido del cual tratará la página modelo. El contenido está escrito en un archivo de texto puro y además se ha provisto de un juego de imágenes que la organización ofrece a modo de sugerencia. El archivo de texto tiene algunas indicaciones sobre las partes de la página y los concursantes deben respetarlas estrictamente.
1. [10%] Representar el contenido en una página web en notación XHTML5, con codificación Unicode, un título adecuado, autoría, y válida ante los estándares del Consorcio Web.
2. [10%] El documento XHTML5 que el desarrollador genere, debe mantener al máximo la semántica, escogiendo apropiadamente los elementos del estándar XHTML5 para cada parte del contenido. Por ejemplo: artículos, encabezados, secciones de contenido, secciones de navegación, párrafos, figuras, segmentos de código, etc.
3. [10%] Todos los estilos deben aparecer en una hoja de estilos externa al documento, la cual debe también ser válida ante los estándares del Consorcio web. Para efectos del concurso, sólo es necesario aplicar estilos para el medio pantalla. Se deben emplear fuentes sin serifas en toda la página web para facilitar la lectura de los visitantes. Los enlaces sólo deben estar subrayados cuando el puntero del ratón pasa sobre ellos. El documento debe ocupar el área total de la ventana del navegador. Todos los títulos deben tener sombra.
4. [15%] El encabezado del sitio web debe aparecer en la parte superior de la página. El fondo para el encabezado debe ser la imagen fortaleza.svg, la cual debe ocupar todo el ancho del navegador incluso aunque éste se redimensione. El logotipo del sitio debe aparecer a la izquierda del título y lema del sitio web.
5. [Opcional. 10%] En la parte inferior del encabezado del sitio web debe aparecer la ubicación del documento actual. Es una secuencia de hipervínculos que muestran la jerarquía de las secciones del sitio web donde se encuentra ubicada la página web actual. La ubicación del documento debe tener por color de fondo el mismo verde que aparece en la parte inferior de la imagen fortaleza.svg, y como color de los enlaces uno de los celestes que aparece en el extremo superior de la misma imagen. Utilice la herramienta Dropper de Inkscape para averiguar estos colores. Recuerde que los textos de la ubicación deben convertirse a enlaces (guíese con el menú del sitio).
6. [15%] El menú de navegación del sitio debe constar de una lista no ordenada de enlaces. El material de contenido utiliza una flecha (->) para separar el texto del enlace de su destino. Note que éstos se organizan jerárquicamente en secciones y subsecciones del sitio web. Los enlaces hacia secciones deben aparecer en negritas; no así los de las subsecciones. El menú de navegación puede ubicarse a la derecha o izquierda del contenido, a gusto del desarrollador. El menú debe tener los bordes inferiores redondeados, y de fondo el mismo color que aparece en la parte inferior de la imagen fortaleza.svg. El color de los enlaces debe ser uno de los celestes que aparece en la parte superior de la misma imagen.
7. [10%] El pie del sitio web debe tener los mismos colores que la ubicación del documento y el menú de navegación. Debe ocupar todo el ancho del navegador en la parte inferior. Nótese que se debe utilizar un elemento semántico para representar la fecha de actualización del documento.
8. [10%] La sección de contenido consta de títulos, párrafos, ejercicios y código. Recuerde utilizar elementos semánticos de XHTML5 para cada uno de ellos. Todas las expresiones regulares (delimitadas entre dos slash, de la forma /expr/) deben representarse como pequeños segmentos de código en XHTML5. Resáltelas con un borde punteado del mismo verde que aparece en la parte inferior de fortaleza.svg.
9. [10%] La sección de contenido debe tener como imagen de fondo la misma que se utilizó para el encabezado (fortaleza.svg), pero ubicada de forma fija en la parte inferior y ocupar todo el ancho del navegador. El color de fondo de la sección de contenido debe ser uno de los celestes que aparecen en la parte superior de la imagen de fondo (fortaleza.svg.
10. [10%] Los ejercicios deben representarse como figuras de XHTML5 y algunos de ellos tienen código que puede ocupar varias líneas. Se han utilizado doble corchetes ([[]]) para indicar dónde inicia y termina un ejercicio, pero estos separadores no deben aparecer en el documento final. Gráficamente los ejercicios deben tener borde redondeado del mismo verde que aparece en la parte inferior de fortaleza.svg.
11. [Opcional. 5%] Haga que el contenido de la página web ocupe todo el ancho del navegador, y el menú del sitio flote sobre el contenido pero sin ocultar el texto del contenido.

Para presentar su solución, comprima su página web, hojas de estilo e imágenes; y suba el archivo comprimido a la plataforma educativa de la ECCI, en la evaluación con nombre Examen 01.