Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa Última revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:2eval:tema06 [2021/01/05 14:50] admin [Ejercicios] |
clase:daw:diw:2eval:tema06 [2024/01/09 19:40] admin [Cálculos en CSS] |
||
---|---|---|---|
Línea 2: | Línea 2: | ||
En anteriores temas hemos visto como con '' | En anteriores temas hemos visto como con '' | ||
+ | |||
+ | Mas información: | ||
+ | * [[https:// | ||
====== Responsivo vs Adaptativo ====== | ====== Responsivo vs Adaptativo ====== | ||
Hacer un diseño responsivo es que la misma página se adapte a distintos tamaños de pantalla. Hacer un diseño adaptativo es hacer páginas distintas según el tamaño de la pantalla. | Hacer un diseño responsivo es que la misma página se adapte a distintos tamaños de pantalla. Hacer un diseño adaptativo es hacer páginas distintas según el tamaño de la pantalla. | ||
Línea 65: | Línea 68: | ||
| | ||
| | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * También se pueden usar decimales con '' | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: 3.14vw; | ||
} | } | ||
</ | </ | ||
Línea 79: | Línea 90: | ||
==== em ==== | ==== em ==== | ||
- | La unidad '' | + | La unidad '' |
Línea 124: | Línea 135: | ||
En el ejemplo el tamaño mínimo de la fuente nunca será menor que 40px por mucho que se haga pequeña la ventana. | En el ejemplo el tamaño mínimo de la fuente nunca será menor que 40px por mucho que se haga pequeña la ventana. | ||
- | ==== camp() ==== | + | ==== clamp() ==== |
Retorna un valor pero sin ser menos que un mínimo ni mayor que un máximo | Retorna un valor pero sin ser menos que un mínimo ni mayor que un máximo | ||
Línea 137: | Línea 148: | ||
En el ejemplo el tamaño mínimo de la fuente nunca será menos que 40px por mucho que se haga pequeña la ventana ni será mayor que 100px por mucho que se haga grande la ventana. | En el ejemplo el tamaño mínimo de la fuente nunca será menos que 40px por mucho que se haga pequeña la ventana ni será mayor que 100px por mucho que se haga grande la ventana. | ||
+ | |||
+ | Mas información: | ||
+ | * [[https:// | ||
==== calc() ==== | ==== calc() ==== | ||
Línea 149: | Línea 163: | ||
<sxh css> | <sxh css> | ||
.c-titulo { | .c-titulo { | ||
- | font-size: | + | font-size: calc( ( 1 / 3 ) * 100vw); |
} | } | ||
</ | </ | ||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: clamp(40px, | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | <note tip> | ||
+ | <note important> | ||
+ | Es obligatorio separar siempre las operaciones de suma y resta con espacios en blanco de sus operandos. | ||
+ | |||
+ | Por ejemplo, la siguiente expresión no es correcta: | ||
+ | |||
+ | '' | ||
+ | |||
+ | debiendose corregir y quedando así: | ||
+ | |||
+ | '' | ||
+ | |||
+ | Aunque los operadores '' | ||
+ | </ | ||
Línea 160: | Línea 196: | ||
+ | ==== Calculo de valores con clamp ==== | ||
+ | La siguiente gráfica muestra como funciona '' | ||
+ | {{ : | ||
+ | |||
+ | Para calcular los tamaños de pantalla donde se producen los cambios (puntos rojos) las variable son las siguientes: | ||
+ | |||
+ | * $w_{lower}$: | ||
+ | * $w_{upper}$: | ||
+ | * $min_{value}$: | ||
+ | * $max_{value}$: | ||
+ | \\ | ||
+ | * $pendiente$: | ||
+ | |||
+ | $$ | ||
+ | pendiente=60 | ||
+ | \\ | ||
+ | min=200 | ||
+ | \\ | ||
+ | max=400 | ||
+ | $$ | ||
+ | \\ | ||
+ | \\ | ||
+ | $$ | ||
+ | |||
+ | w_{lower} * \frac {pendiente}{100}=min_{value} | ||
+ | \\ | ||
+ | w_{lower} = \frac {min_{value}*100}{pendiente}= \frac {200*100}{60}=333px | ||
+ | $$ | ||
+ | |||
+ | \\ | ||
+ | \\ | ||
+ | $$ | ||
+ | w_{upper} * \frac {pendiente}{100}=max_{value} | ||
+ | \\ | ||
+ | w_{upper} = \frac {max_{value}*100}{pendiente}= \frac {400*100}{60}=667px | ||
+ | |||
+ | |||
+ | $$ | ||
+ | |||
+ | |||
+ | De forma genérica podemos establecer los valores de las 4 variables de la siguiente forma: | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | Siendo los valores de $pendiente$ y $coeficiente_{posición}$ los siguientes: | ||
+ | |||
+ | $$ | ||
+ | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}*100 | ||
+ | \\ | ||
+ | coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower} | ||
+ | $$ | ||
+ | |||
+ | Veamos el ejemplo en el que queremos que la propiedad '' | ||
+ | * $w_{lower}$: | ||
+ | * $w_{upper}$: | ||
+ | * $min_{value}$: | ||
+ | * $max_{value}$: | ||
+ | |||
+ | Entonces | ||
+ | |||
+ | $$ | ||
+ | pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}=\frac {20-12}{600-230}*100=2, | ||
+ | \\ | ||
+ | coeficiente_{posición}=min_{value} - \frac{pendiente}{100}*w_{lower}=12-\frac{2, | ||
+ | $$ | ||
+ | |||
+ | Por lo tanto el css será: | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: clamp(12px, | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | * El código en python para crear los gráficos es el siguiente: | ||
+ | <sxh python> | ||
+ | import numpy as np | ||
+ | import matplotlib.pyplot as plt | ||
+ | from matplotlib.ticker import AutoLocator | ||
+ | |||
+ | min_value=200 | ||
+ | max_value=400 | ||
+ | pendiente=60 | ||
+ | coeficiente_posición=15 | ||
+ | |||
+ | def decore_axes(axes, | ||
+ | axes.set_title(title, | ||
+ | axes.set_xlabel(xlabel, | ||
+ | axes.set_ylabel(ylabel, | ||
+ | axes.set_xlim(xmin=0) | ||
+ | axes.grid(visible=True, | ||
+ | axes.set_axisbelow(True) | ||
+ | axes.yaxis.set_major_locator(AutoLocator()) | ||
+ | axes.set_facecolor('# | ||
+ | |||
+ | max_w_size=1200 | ||
+ | x=np.linspace(0, | ||
+ | y=[] | ||
+ | |||
+ | for xi in x: | ||
+ | yi=xi*(pendiente/ | ||
+ | if (yi< | ||
+ | yi=min_value | ||
+ | elif (yi> | ||
+ | yi=max_value | ||
+ | |||
+ | y.append(yi) | ||
+ | |||
+ | min_corte_x=((min_value-coeficiente_posición)*100)/ | ||
+ | max_corte_x=((max_value-coeficiente_posición)*100)/ | ||
+ | figure=plt.figure(figsize=(8, | ||
+ | axes = figure.add_subplot(1, | ||
+ | |||
+ | axes.plot(x, | ||
+ | axes.scatter(min_corte_x, | ||
+ | axes.scatter(max_corte_x, | ||
+ | |||
+ | decore_axes(axes, | ||
+ | |||
+ | _=axes.set_xticks( [0, | ||
+ | </ | ||
===== Imágenes ===== | ===== Imágenes ===== | ||
- | En el siguiente enlace: [[https:// | + | Hay muchas opciones al respecto de las imágenes |
+ | * Ancho o alto del dispositivo | ||
+ | * Pixel-ratio del dispositivo | ||
+ | * Tipos soportados por el navegador. | ||
+ | Una explicación completa la puedes ver en el siguiente enlace: [[https:// | ||
+ | |||
+ | Aquí solo vamos a ver como carga una imagen u otra en función del ancho del dispositivo. | ||
+ | |||
+ | Veamos un ejemplo: Según la resolución , no queremos cargar siempre la misma imagen sino que cambiamos la perspectiva de la foto ya que tenemos menos //sitio//. | ||
+ | |||
+ | * Pantallas grandes: | ||
+ | {{:: | ||
+ | |||
+ | |||
+ | * Pantallas medianas: | ||
+ | {{:: | ||
+ | |||
+ | |||
+ | * Pantallas pequeñas: | ||
+ | {{:: | ||
+ | |||
+ | <sxh html> | ||
+ | < | ||
+ | <source media=" | ||
+ | <source media=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | </ | ||
===== Tablas ===== | ===== Tablas ===== | ||
Para hacer tablas responsivas, | Para hacer tablas responsivas, | ||
Línea 408: | Línea 593: | ||
Otro ejemplo de ello lo podemos ver en [[https:// | Otro ejemplo de ello lo podemos ver en [[https:// | ||
- | ===== Ejemplo de Menu responsivo ===== | ||
- | {{menu.zip|}} | + | También en Boostrap qu permite clases responsivas: |
+ | |||
+ | ===== Breakpoints ===== | ||
+ | Al crear la arquitectura responsiva es necesario indicar los pixeles de cada pantalla así como los tamaños. En los siguientes artículos se indica cuales se usan en diversos frameworks css. | ||
+ | |||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
+ | |||
+ | * **Bootstrap** | ||
+ | |||
+ | ^ Nombre | ||
+ | | -- | ||
+ | | sm | ||
+ | | md | ||
+ | | lg | ||
+ | | xl | ||
+ | | xxl | ||
+ | |||
+ | * **Tailwind** | ||
+ | |||
+ | ^ Nombre | ||
+ | | sm | ||
+ | | md | ||
+ | | lg | ||
+ | | xl | ||
+ | |||
+ | ===== Menu responsivo ===== | ||
+ | |||
+ | {{..:1eval:menu.zip|}} | ||
<sxh html;title: HTML> | <sxh html;title: HTML> | ||
Línea 502: | Línea 715: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | ===== Resumen técnicas responsivas ===== | ||
+ | Hemos visto varias formas de hacer las cosas responsivas. Veamos ahora una tabla en la que se explican las 4 formas posibles: | ||
+ | |||
+ | |||
+ | ^ ^ Interno | ||
+ | ^ Fluido | ||
+ | ^ Escalonado | ||
+ | |||
+ | |||
+ | <note tip> | ||
+ | El tipo **Externo/ | ||
+ | </ | ||
+ | |||
+ | * Interno/ | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: 10vw | ||
+ | } | ||
+ | </ | ||
+ | <sxh html> | ||
+ | <h1 class=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | * Interno/ | ||
+ | |||
+ | <sxh css> | ||
+ | .c-titulo { | ||
+ | font-size: 40px; | ||
+ | } | ||
+ | | ||
+ | @media (min-width: 768px) { | ||
+ | .c-titulo { | ||
+ | font-size: 55px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | <sxh html> | ||
+ | <h1 class=" | ||
+ | </ | ||
+ | |||
+ | * Externo/ | ||
+ | |||
+ | <sxh html> | ||
+ | < | ||
+ | <tr> | ||
+ | <th class=" | ||
+ | <th class=" | ||
+ | <th class=" | ||
+ | <th class=" | ||
+ | <th class=" | ||
+ | </tr> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * Externo/ | ||
+ | |||
+ | <sxh html> | ||
+ | <p class=" | ||
+ | </ | ||
+ | |||
===== Ejercicios ===== | ===== Ejercicios ===== | ||
Línea 511: | Línea 788: | ||
* 1 div cuadrado azul de tamaño 400px | * 1 div cuadrado azul de tamaño 400px | ||
* 1 div cuadrado verde de tamaño 400px | * 1 div cuadrado verde de tamaño 400px | ||
- | * Dentro cada cuadrado | + | * Dentro cada cuadrado |
- | * Dentro cada cuadrado | + | * Dentro cada cuadrado |
Ahora: | Ahora: | ||
- | * Explica la diferencia de tamaños entre los de 10% y 10vw | + | * Explica la diferencia de tamaños entre los de 20% y 20vw |
* Ahora cambia el tamaño de la página y mira como de modifica el tamaño de los cuadrados. Indica cuales han cambiado de tamaño y explica porqué han cambiado de tamaño | * Ahora cambia el tamaño de la página y mira como de modifica el tamaño de los cuadrados. Indica cuales han cambiado de tamaño y explica porqué han cambiado de tamaño | ||
Línea 524: | Línea 801: | ||
* Rojo | * Rojo | ||
* Verde | * Verde | ||
- | * Azul | + | * Azul (Que tenga Tamaño de fuente 20px) |
De forma que: | De forma que: | ||
- | * El cuadrado Rojo expreses | + | * Que el cuadrado Rojo se indique |
- | * El cuadrado Verde expreses | + | * Que el cuadrado Verde se indique |
- | * El cuadrado Azul expreses | + | * Que el cuadrado Azul se indique |
+ | |||
+ | Añade ahora el siguiente CSS: | ||
+ | <sxh css> | ||
+ | html { | ||
+ | font-size: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Y comprueba que solo se ha modificado el tamaño del cuadrado Verde. | ||
==== Ejercicio 3 ==== | ==== Ejercicio 3 ==== | ||
Línea 538: | Línea 825: | ||
* Un div cuadrado de color rosa de forma que su tamaño siempre sea la mitad de la pantalla mas 20px | * Un div cuadrado de color rosa de forma que su tamaño siempre sea la mitad de la pantalla mas 20px | ||
* Un div cuadrado de color amarillo de forma que su tamaño siempre sea la mitad de la pantalla mas 20px pero no pueda ser menor que 100px ni mayor que 600px | * Un div cuadrado de color amarillo de forma que su tamaño siempre sea la mitad de la pantalla mas 20px pero no pueda ser menor que 100px ni mayor que 600px | ||
+ | |||
==== Ejercicio 4 ==== | ==== Ejercicio 4 ==== | ||
- | Crea una clase de BEM que sirva para hacer tablas. Se deberá permitir | + | Haz una página HTML de forma que se cargue una imagen distinta según el siguiente ancho de la pantalla: |
- | * Que las columnas como mínimo puedan tener algunos | + | * menos de 500px |
- | * Que las columnas como máximo puedan tener algunos | + | * entre 500px y 1000px |
- | * Que si no caben las columnas que aparezca una barra de scroll. | + | * mas de 1000px |
- | * La tabla tendrá alrededor un borde y un sombreado | + | |
- | * Las cabeceras de la tabla serán | + | |
==== Ejercicio 5 ==== | ==== Ejercicio 5 ==== | ||
Línea 551: | Línea 837: | ||
==== Ejercicio 6 ==== | ==== Ejercicio 6 ==== | ||
+ | Crea una clase css llamada '' | ||
+ | * Menos de 500px sea de color rojo | ||
+ | * Entre 500px y 750px sea de color verde | ||
+ | * Entre 750px y 1000px sea de color azul | ||
+ | * Más de 1000px sea de color naranja | ||
- | ==== Ejercicio | + | Lo usarán en una página HTML donde estará un cuadrado de 200px x 200px |
+ | |||
+ | ==== Ejercicio | ||
+ | Crea las siguientes clases css: | ||
+ | |||
+ | <sxh css> | ||
+ | .g--bg-color-red { | ||
+ | background-color:# | ||
+ | } | ||
+ | .g--bg-color-green { | ||
+ | background-color:# | ||
+ | } | ||
+ | .g--bg-color-blue { | ||
+ | background-color:# | ||
+ | } | ||
+ | .g--bg-color-orange { | ||
+ | background-color:# | ||
+ | } | ||
+ | |||
+ | |||
+ | </ | ||
+ | |||
+ | Y modificalas con el sufijo " | ||
+ | |||
+ | ==== Ejercicio 8 ==== | ||
+ | Crea modificadores globales para las siguientes propiedades CSS: | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | Los posibles valores de cada uno de ellos serán: 100px, 150px , 200px, 250px, 300px, 350px, 400px, 450px, 500px, 550px, 600px | ||
+ | |||
+ | Crea también otro modificador global para '' | ||
+ | |||
+ | Crea una clase BEM para tablas HTML de forma que: | ||
+ | * La tabla tendrá alrededor un borde y un sombreado | ||
+ | * Las cabeceras de la tabla serán de otro color. | ||
+ | |||
+ | Con todo los anterior, haz una página HTML con una tabla en la que: | ||
+ | * Haya columnas que tengan un ancho mínimo y otro máximo | ||
+ | * Haya columnas que tengan un ancho fijo | ||
+ | * Haya una columna que tengan un ancho mínimo | ||
+ | * Que si la tabla no cabe, aparezcan las barras de scroll. | ||
+ | |||
+ | ==== Ejercicio 9 ==== | ||
+ | Modifica el ejercicio anterior de forma que ahora los modificadores globales se puedan usar de forma responsiva con | ||
+ | * @movil | ||
+ | * @tablet | ||
+ | * @desktop | ||
+ | |||
+ | Modifica el ejemplo de la tabla HTML de forma que las columnas ahora tenga siempre tamaños fijos (es decir no usar min o max), pero que cambien según la resolución de la pantalla. | ||
+ | |||
+ | |||
+ | ==== Ejercicio 10 ==== | ||
+ | Usando las clases de BEM y los modificadores globales que has ido usando durante el curso, añade de forma que ahora se puedan usar de forma responsiva con | ||
+ | * @movil | ||
+ | * @tablet | ||
+ | * @desktop | ||
+ | |||
+ | |||
+ | ==== Ejercicio 11 ==== | ||
Modifica la página del tema anterior para hacerla responsiva de forma que según la resolución se cambie el tamaño : | Modifica la página del tema anterior para hacerla responsiva de forma que según la resolución se cambie el tamaño : | ||
* El tamaño de los títulos | * El tamaño de los títulos | ||
- | * Los menús sean responsivos. | ||
- | * Se oculte el banner en tamaño pequeños. | ||
* Los padding | * Los padding | ||
* Los margins | * Los margins | ||
+ | * Los menús sean responsivos. Es decir que cuando la pantalla es pequeña, se muestre la " | ||
+ | * Se oculten imágenes en tamaños pequeños. | ||