UNIVERSIDAD DE CÓRDOBA

FACULTAD DE INGENIERÍAS
PROGRAMA DE INGENIERÍA DE SISTEMAS

Asignatura: Desarrollo Web Semestre: IX

Docente: Deivis Rodríguez Ortiz Temas: HTML + CSS + Bootstrap + SASS

DESARROLLO DEL TALLER

Se desea desarrollar un sitio web con HTML y CSS como el que se
muestra a continuación:

Se requiere la utilización de Bootstrap para la maquetación. De

bootstrap solamente se utilizara el sistema de grilla para que el sitio
presente un diseño responsable (utilización de los media querys
mediante el uso de las clases de las columnas en cada uno de los
tamaños de pantalla definidos por este framework).

Para el menú superior (navbar) se debe realizar el respectivo conjunto

de reglas CSS que permitan que al pasar el mouse por encima cambie
de color, como se muestra en la siguiente imagen.
 UNIVERSIDAD DE CÓRDOBA
FACULTAD DE INGENIERÍAS
PROGRAMA DE INGENIERÍA DE SISTEMAS

Asignatura: Desarrollo Web Semestre: IX

Docente: Deivis Rodríguez Ortiz Temas: HTML + CSS + Bootstrap + SASS
 UNIVERSIDAD DE CÓRDOBA
FACULTAD DE INGENIERÍAS
PROGRAMA DE INGENIERÍA DE SISTEMAS

Asignatura: Desarrollo Web Semestre: IX

Docente: Deivis Rodríguez Ortiz Temas: HTML + CSS + Bootstrap + SASS

Por último se solicita que el diseño se adapte a dos posibles tamaños de

visualización:

 Tamaño 1: pantallas medianas, largas y extra largas: la pagina

debe visualizarse como se ha descrito en las dos imágenes
anteriores.
 Tamaño 2: pantallas extra pequeñas y pequeñas: el sitio debe
mostrarse igual a como se ve en las siguientes dos imágenes (el
navbar ubicarse en la zona inferior del header y ocupar un 100%
de ancho y el aside debe ubicarse en la parte inferior de las
noticias):
 UNIVERSIDAD DE CÓRDOBA
FACULTAD DE INGENIERÍAS
PROGRAMA DE INGENIERÍA DE SISTEMAS

Asignatura: Desarrollo Web Semestre: IX

Docente: Deivis Rodríguez Ortiz Temas: HTML + CSS + Bootstrap + SASS
 UNIVERSIDAD DE CÓRDOBA
FACULTAD DE INGENIERÍAS
PROGRAMA DE INGENIERÍA DE SISTEMAS

Asignatura: Desarrollo Web Semestre: IX

Docente: Deivis Rodríguez Ortiz Temas: HTML + CSS + Bootstrap + SASS

Algunos aspectos a tener en cuenta para el diseño:

- En pantallas grandes debe existir un margen a los lados entre el

contenido y el borde del navegador
- El titulo en el header presenta un leve sombra
- Los títulos de las cajas ubicadas en el aside tienen sobra y el
fondo un degradado.
- Cada noticia tiene un título en h2, un párrafo para la fecha, una
imagen alineada a la izquierda y dos párrafos con la descripción
(resumen) de la noticia
- Recuerde que HTML solo se utilizara de forma semántica para
disponer los elementos y todos las características visuales y
organización de los mismos elementos debe realizarse mediante
CSS.
- Los estilos CSS se deben realizar mediante el preprocesador SASS
- Se solicita una estructura de directorio de la siguiente forma:

o Examen1 [DIRECTORIO]
 css [DIRECTORIO]
 estilos.css [ARCHIVO]
 sass [DIRECTORIO]
 estilos.scss [ARCHIVO]
 images [DIRECTORIO]
 noticias.png [ARCHIVO]
 index.html [ARCHIVO]

- Comprimir y subir a la plataforma.