Diw Ud1 Act 2 Repaso de Css

UD1. Maquetación Web usando estilos. ACT 2.
Repaso de CSS
UD1 ACT2. Repaso de CSS

Crea (si no la tienes ya) una carpeta que llamarás ud1, dentro habrá una llamada
actividades dentro habrá otra llamada ud1_act2. Dentro de la misma, cada ejercicio irá
ubicado en una carpeta que llamarás ejercicio1, ejercicio2, etc… respectivamente. En
los nombres de las carpetas de los ejercicios no uses espacios ni mayúsculas. Dentro de cada
ejercicio:
• Los archivos Sasss irán ubicados en la carpeta scss

• Los estilos irán ubicados en la carpeta css.
• Las imágenes correspondientes a estilos irán ubicadas en la carpeta css/img
• Las imágenes correspondientes a la Web irán ubicadas en la carpeta img.
El código debería entregarse convenientemente formateado y comentado si fuera necesario.

Todas las páginas deberían tener el nombre del ejercicio y la actividad en el título.
La entrega de la actividad se realizará vía GitHub, aunque deberá constar como entregada en
Microsoft Teams previamente a la fecha límite de entrega.
Todos los ejercicios se implementarán usando Sass. En todos los ejercicios, utiliza la hoja de estilos
reset.css previamente a la tuya para unificar estilos en todos los navegadores.
En los ejercicios de este tema, puedes usar el posicionamiento con FlexBox. Para ello,
simplemente asigna al contenedor de elementos del ejercicio donde estés la propiedad
display:flex. La mayoría de ejercicios no necesitan más posicionamiento salvo que se indique
lo contrario.
Diseño de Interfaces Web (DIW) Curso 2024-2025 1

UD1. Maquetación Web usando estilos. ACT 2. Repaso de CSS
1. Crea dos cajas, conteniendo el texto “Anterior” y “Siguiente” respectivamente y determina

las reglas CSS necesarias para que el resultado sea lo más parecido posible al siguiente. Ten
en cuenta que las cajas deberían estar dentro de un contenedor. Guarda el resultado como
ejercicio1.
La tipografía usada es Roboto (descargarla desde Google Fonts a una subcarpeta dentro de
CSS e impórtala desde Google Fonts)
Utiliza variables Sass para definir los principales aspectos de la página: Colores, distancia base
y tipografía
En este ejercicio puedes asignar la propiedad justify-content: space-between

al contenedor Flex para que el contenido vaya a los extremos del contenedor.
2. Implementa el siguiente menú horizontal, que irá en la página ejercicio2

• El menú está integrado dentro de un navbar que a su vez tiene una lista no ordenada
de enlaces.
o Los elementos están posicionados usando Flex
o Los iconos están implementados utilizando Font Awesome (crea una cuenta y un
nuevo kit que usaras para los iconos que uses a lo largo del año)
o La tipografía usada es Ubuntu (puedes econtrarla en Google Fonts).
Al pasar el ratón sobre el título, la letra del mismo pasará a color negro. Al pasar el ratón sobre
uno de los elementos del menú, su color de fondo pasará a verde. Los cambios se realizarán
mediante una transición

3. Implementa la siguiente página a partir de las imágenes proporcionadas. Guarda el ejercicio

como ejercicio3. Ten en cuenta que la primera caja tiene unas dimensiones de 100 x 100
píxeles.
NOTA: Las imágenes se han establecido como imagen de fondo dentro de la caja, no como
elementos img. Para lograr los efectos mostrados, tendrás que jugar con los valores de la
propiedad background-size
4. A partir de las imágenes proporcionadas realiza la siguiente página, que llamarás

ejercicio4:
a. Utiliza fondo.jpg como imagen de fondo de la página
b. Utiliza imagen sello.png como imagen de borde, usando la técnica vista en el
apartado anterior
Para dar rotación a los elementos puedes usar la propiedad transform:rotate(Xdeg).

5. Crea una página con una única capa de 800 x 400 píxeles cuyo fondo sea lo más parecido al
siguiente en la página ejercicio5:
Todas las imágenes deberían formar el fondo de la capa descrita.
6. Implementa las siguientes tarjetas CSS.
Los logos de las redes sociales son iconos de Font Awesme. La tipografía usada es Montserrat.
Al pasar el ratón sobre cada una de las tarjetas cambiará el color de la misma:
Además, si pasamos el ratón sobre uno de los botones cambiará el redondeo del borde.
Los cambios se realizarán mediante una transición

7. Implementa la siguiente capa formada por varios enlaces. Cada enlace tiene una imagen de
fondo distinta, proporcionada en el enunciado.
Al pasar sobre cada uno de ellos cambiará su color, dado que se sustituirá por la imagen
de sustitución correspondiente (como ocurre con el segundo enlace en esta captura):
AMPLIACIÓN: Refactoriza el Sass para que los datos de las redes sociales se tomen de una lista con el
nombre de las mismas.
• Tendrás que:
• Definir los botones en el HTML
• Definir una lista con los IDs de los botones en Sass
• Recorrer la lista. Para cade elemento de la clase:
• Generar una regla para el ID sobre el que itero
• Definir una clase donde especifiques la imagen de fondo
• Definir el comportamiento al pasar el ratón por encima

8. Modifica el ejercicio anterior para que los botones usen la misma imagen (un sprite) en lugar
de usar imágenes individuales. Cada botón tendrá que definir individualmente la propiedad
background-position (consulta cómo hacerlo en este enlace)
Ten en cuenta que este ejercicio debería seguir manteniendo el cambio de color al
pasar el ratón por encima

RESULTADOS DE APRENDIZAJE Y CRITERIOS DE EVALUACIÓN

Esta actividad contribuye a la consecución del RA2. Crea interfaces Web homogéneos definiendo
y aplicando estilos.
Los criterios de evaluación que permiten valorar la consecución del resultado de aprendizaje son
los siguientes:
2a) Se han conocido las posibilidades de modificar las etiquetas HTML
2b) Se han definido estilos de manera directa
2c) Se han definido y asociado estilos globales en hojas externas
2d) Se han definido hojas de estilo alternativas
En el Moodle de la asignatura se detalla la rúbrica de corrección para la actividad.

Diw Ud1 Act 2 Repaso de Css

Cargado por

Copyright:

Formatos disponibles

Diw Ud1 Act 2 Repaso de Css

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diw Ud1 Act 2 Repaso de Css

Cargado por

Copyright:

Formatos disponibles

UD1. Maquetación Web usando estilos. ACT 2.

UD1 ACT2. Repaso de CSS

• Los archivos Sasss irán ubicados en la carpeta scss

El código debería entregarse convenientemente formateado y comentado si fuera necesario.

Diseño de Interfaces Web (DIW) Curso 2024-2025 1

1. Crea dos cajas, conteniendo el texto “Anterior” y “Siguiente” respectivamente y determina

En este ejercicio puedes asignar la propiedad justify-content: space-between

2. Implementa el siguiente menú horizontal, que irá en la página ejercicio2

Diseño de Interfaces Web (DIW) Curso 2024-2025 2

3. Implementa la siguiente página a partir de las imágenes proporcionadas. Guarda el ejercicio

4. A partir de las imágenes proporcionadas realiza la siguiente página, que llamarás

Para dar rotación a los elementos puedes usar la propiedad transform:rotate(Xdeg).

Diseño de Interfaces Web (DIW) Curso 2024-2025 3

Todas las imágenes deberían formar el fondo de la capa descrita.

6. Implementa las siguientes tarjetas CSS.

Los cambios se realizarán mediante una transición

Diseño de Interfaces Web (DIW) Curso 2024-2025 4

Diseño de Interfaces Web (DIW) Curso 2024-2025 5

Diseño de Interfaces Web (DIW) Curso 2024-2025 6

RESULTADOS DE APRENDIZAJE Y CRITERIOS DE EVALUACIÓN

2a) Se han conocido las posibilidades de modificar las etiquetas HTML

2b) Se han definido estilos de manera directa

2c) Se han definido y asociado estilos globales en hojas externas

2d) Se han definido hojas de estilo alternativas

En el Moodle de la asignatura se detalla la rúbrica de corrección para la actividad.

Diseño de Interfaces Web (DIW) Curso 2024-2025 7

También podría gustarte