Inicio Tarea obligatoria: CSS avanzado
Artículo
Cancelar

Tarea obligatoria: CSS avanzado

2024-11-10 Actualizado 2024-11-22 8 minutos lectura

Información sobre la tarea

La entrega será en formato PDF. Leer Entrega y presentación de tareas.

La tarea se calificará con una nota de APTO (10) o NO APTO (0).

Duración actividades obligatorias: 7 horas.

RA2. Crea interfaces web homogéneos definiendo y aplicando estilos.

Actividades

A continuación, se muestran las actividades a realizar.

(Voluntaria) None vs hidden

Imagina un ejemplo de página web en la que al hacerse algo invisible sea mejor usar display:none y otro ejemplo en el que sea mejor usar visibility:hidden.

Flexbox en freeCodeCamp

Hacer el apartado “Aprende CSS Flexbox construyendo una galería de fotos” del curso Diseño Web Responsivo.

Galería de fotos de gatos Galería de fotos de gatos

📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.

(Voluntaria) Flexbox froggy

Haz todas las actividades de Flexbox Froggy.

📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil público.

(Voluntaria NO recomendada) Tipografía en freeCodeCamp

Hacer el apartado “Aprende tipografía construyendo una etiqueta de nutrición” del curso Diseño Web Responsivo.

Etiqueta de nutrición Etiqueta de nutrición

📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.

(Voluntaria NO recomendada) Pseudoselectores en freeCodeCamp

Hacer el apartado “Aprende más sobre los selectores pseudo de CSS construyendo una hoja de balance” del curso Diseño Web Responsivo.

Balance Balance

📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.

(Voluntaria NO recomendada) Gato en freeCodeCamp

Hacer el apartado “Aprende CSS Intermedio haciendo una pintura de gatos” del curso Diseño Web Responsivo.

Gato Gato

📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.

Piano en freeCodeCamp

Hacer el apartado “Aprende diseño web adaptativo construyendo un piano” del curso Diseño Web Responsivo.

Piano Piano

📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.

(Voluntaria) Horizonte en freeCodeCamp

Hacer el apartado “Aprende variables CSS construyendo un horizonte de la ciudad” del curso Diseño Web Responsivo.

Horizonte de ciudad Horizonte de ciudad

📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.

Grid en freeCodeCamp

Hacer el apartado “Aprende la cuadrícula de CSS construyendo una revista” del curso Diseño Web Responsivo.

📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.

(Voluntaria) Grid Garden

Haz todas las actividades de Grid Garden.

📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.

Stylelint

Utilizando el tutorial StyleLint: Linter CSS del todopoderoso MANZ instala y configura en un proyecto llamado <tu usuario>_t02.2 y comprueba que StyleLint funciona perfectamente. Puedes combinarlo con Error Lens para que muestre los errores en la misma línea de código.

📷 Haz una captura de código CSS con errores.

SASS

Lee el artículo Tutorial: Primeros pasos con SASS y convierte los siguientes tres ficheros SCSS en CSS y explica que transformaciones ocurren.

1
2
3
4
5
6
7

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

📷 Haz una o varias capturas para demostrar que has ejecutado sass.

Bootstrap

Descarga los ejemplos de la siguiente página https://getbootstrap.com/docs/5.3/examples/.

Abre uno y modifícalo para que aparezca tu código de usuario en algún sitio.

📷 Haz una captura cuando termines la actividad.

Abre el ejemplo grid donde se ve el comportamiento del grid de Bootstrap y responde a las siguientes preguntas:

  1. ¿De cuántas columnas consta el grid de bootstrap?
  2. ¿Qué diferencia aprecias entre usar la clase .col-4 y la clase .col-md-4?
  3. Cuando cambiamos del tema claro al tema oscuro, ¿cambia algo en el documento HTML?

(Voluntaria) Tema claro y oscuro I

Dados los siguientes ficheros:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tema claro y oscuro</title>
  <link rel="stylesheet" href="claroOscuro.css">
</head>
<body>
  <header class="container">
    <div class="row">
      <div class="col text-center">
        <label id="switch">
          <input type="checkbox">
          <span class="slider round"></span>
        </label>
        <h1>Marcos Ruiz García</h1>
      </div>
    </div>
  </header>
  <main class="container">
    <section class="row justify-content-center">
      <div class="col-md-8 text-center">
        <h2>Mruizg</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure doloremque minima, nisi aspernatur, enim dolorum maiores error quis, veritatis incidunt vitae voluptatum reprehenderit aut distinctio officiis corrupti voluptates qui nostrum.
        </p>
        <a href="https://marcosruiz.github.io/" target="_blank">Visita mi web</a>
      </div>
    </section>
  </main>
  <script src="claroOscuro.js"></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

:root {
  --color-fuente: #2b2b2b;
  --color-fondo: #fff;
}

[class="dark"] {
  --color-fuente: #fff;
  --color-fondo: #2b2b2b;
}

body {
  background-color: var(--color-fondo);
  color: var(--color-fuente);
  transition: background-color 1s ease;
}

header {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 2rem;
  font-family: 'Cinzel', serif;
}

h2 {
  font-size: 1.8rem;
  font-family: 'Cinzel', serif;
}

p {
  margin-top: 1.4rem;
  margin-bottom: 4rem;
  font-family: 'Raleway', sans-serif;
  font-size: 1.4rem;
}

a {
  background-color: var(--color-fuente);
  color: var(--color-fondo);
  text-decoration: none;
  text-transform: uppercase;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: .75rem;
  padding-right: .75rem;
  border-style: solid;
  border-width: .2rem;
  border-color: var(--color-fuente);
  border-radius: 2rem;

}

a:hover {
  background-color: var(--color-fondo);
  color: var(--color-fuente);
  text-decoration: none;
}

/*Botón de cambio de tema*/

#switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

#switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-fuente);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--color-fondo);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: var(--color-fuente);
}

input:focus+.slider {
  box-shadow: 0 0 1px var(--color-fuente);
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

1
2
3
4
5
6
7
8
9

const colorSwitch = document.querySelector('#switch input[type="checkbox"]');
function cambiaTema(ev) {
  if (ev.target.checked) {
    document.documentElement.setAttribute("class", "dark");
  } else {
    document.documentElement.removeAttribute("class");
  }
}
colorSwitch.addEventListener("change", cambiaTema);

Ejecútalos, analiza y contesta a las siguientes preguntas:

  1. ¿A qué hace referencia el selector o pseudoselector :root?
  2. ¿Qué es --color-fuente?
  3. ¿Qué hace la propiedad transition: background-color 1s ease;?

📷 Pon tu nombre y tu código de usuario en el HTML y haz una captura de pantalla.

Tema claro y oscuro II

Haz lo mismo que en el ejercicio anterior pero esta vez utilizando dos hojas de estilo diferentes. Para ello deberás enlazar dos hojas de estilo como ves a continuación:

1
2
3
4
5

  <!-- Tema claro (predeterminado) -->
  <link id="tema-claro" rel="stylesheet" href="claro.css" title="Tema claro">
  
  <!-- Tema oscuro (alternativo) -->
  <link id="tema-oscuro" rel="stylesheet" href="oscuro.css" title="Tema oscuro">

Y deberás ejecutar la siguiente función para cambiar entre una hoja de estilos y otra:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function cambiaTema(ev) {
  // Obtén las hojas de estilo
  const claro = document.getElementById("tema-claro");
  const oscuro = document.getElementById("tema-oscuro");

  // Alterna entre los estilos
  if (claro.disabled) {
    claro.disabled = false; // Activa el tema claro
    oscuro.disabled = true; // Desactiva el tema oscuro
  } else {
    claro.disabled = true; // Desactiva el tema claro
    oscuro.disabled = false; // Activa el tema oscuro
  }
}

document.getElementById("tema-oscuro").disabled = true;

Y responde a las siguientes preguntas:

  1. ¿Qué solución te parece mejor para cambiar de tema? ¿Por qué?
  2. ¿En alguno de los dos casos me puedo ahorrar el uso de variables?

Dame tu feedback

Bibliografía

Desarrollo de Aplicaciones Web, Diseño de Interfaces Web
fp ciclo superior modulo formación profesional daw desarrollo de aplicaciones web diseño de interfaces web diw
Este artículo está licenciado bajo CC BY 4.0 por el autor.
Recientemente actualizado
Índice

Ley de propiedad intelectual

Tarea obligatoria: Arrays, funciones y objetos en JavaScript