2ª Evaluación I.E.S.

La Arboleda
Examen práctico BootStrap – 05/02/2018 Profesora: Isabel M. Jiménez Cumbreras

Lenguajes de Marcas – 1º DAW 1/4

Instrucciones Consejos

 Crear una carpeta que se llamará
“Apellidos, Nombre_BootStrap(05-02-
18)”, donde guardaréis la solución.
 Descarga el archivo comprimido del examen
que encontrarás en la plataforma.
 Comprimir en formato .zipo.rar la carpeta
con la solución del examen.
 Avisa al profesor y súbelo a través del
enlace habilitado.
 No cierres el equipo ni salgas de la clase
hasta que el profesor verifique la recepción.
 Guardar cada poco el trabajo que estáis
realizando.
 Antes de poneros a programar como “locos”
pensar detenidamente lo que vais a hacer.
 Si tenéis código que funciona y pensáis
hacer modificaciones para añadir algo,
puede resultar interesante copiar el fichero,
no vaya a resultar que se estropee lo que ya
funcionaba.
 El programa es personal e intransferible, por
lo que no deberíais tener que mirar para
nada al monitor del compañero.
 Escoger en primer lugar los problemas que
tienen fácil solución, asegurad el aprobado
lo primero.

Examen Bootstrap
Ej.1 Configura una página web tal y como se muestra en la figura. La página se muestra por
(2.5 punto)
completo en el navegador sin usar barra de desplazamiento vertical.
Visión en tamaños de pantalla de 992px. o más.

Visión en tamaños de pantalla entre 576px y 992px.

 2ª Evaluación I.E.S. La Arboleda
Examen práctico BootStrap – 05/02/2018 Profesora: Isabel M. Jiménez Cumbreras

Lenguajes de Marcas – 1º DAW 2/4

En pantallas de menor número de pixeles las capas se muestran una debajo de otra.

Ej. 2 Realiza una página web como la que se muestra, esta es una plantilla típica para Wordpress. Sigue
(7,5 puntos)
las indicaciones de abajo.
2ª Evaluación I.E.S. La Arboleda
Examen práctico BootStrap – 05/02/2018 Profesora: Isabel M. Jiménez Cumbreras

Lenguajes de Marcas – 1º DAW 3/4

NOTA: Las imágenes muestran cómo debe verse la imagen en una pantalla de PC.

INDICACIONES

 Para tamaños inferiores a 576px los elementos se colocan uno debajo de otro como se
muestra a continuación:

 Usa iconMoon para los iconos de la página.

 El texto que se muestra en cada post o elemento puedes extraerlo de sitios como
https://es.lipsum.com/ o http://www.chiquitoipsum.com/.
 Los elementos del menú cambian su color a # 3180E6 cuando el ratón pasa por encima.
 El carrusel o slider está compuesto por dos imágenes que encontrarás en la carpeta de
examen.
 2ª Evaluación I.E.S. La Arboleda
Examen práctico BootStrap – 05/02/2018 Profesora: Isabel M. Jiménez Cumbreras

Lenguajes de Marcas – 1º DAW 4/4

 Debes usar en todo momento clases bootstrap. Si necesitas crear tus propias clases genera
un fichero CSS propio y haz referencia a él en la actividad.

Este ejercicio se puntuará siguiendo estos criterios:

- Uso de comentarios, código limpio y bien estructurado (0,5 puntos).
- Diseño responsive (1,5 puntos).
- Cabecera (zona de logo y menú) (2 punto).
- Slider (carrusel) (1 punto).
- Post principales (1,5 puntos).
- Zona inferior (1 puntos).