Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:2eval:tema06 [2021/01/20 17:51]
admin [Arquitectura responsiva]
+++ clase:daw:diw:2eval:tema06 [2025/02/16 22:18] (actual)
admin [Cálculos en CSS]
@@ Línea 26: / Línea 26: @@
 Mas información:
   * [[https://css-tricks.com/snippets/html/responsive-meta-tag/|Responsive Meta Tag]]
-  * [[https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag|Usando la etiqueta meta viewport para controlar la composición en los navegadores móviles]]
+  * [[https://web.archive.org/web/20200415000746/https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag|Usando la etiqueta meta viewport para controlar la composición en los navegadores móviles]]
   * [[https://developers.google.com/web/fundamentals/design-and-ux/responsive/#set-the-viewport|Configurar la ventana de visualización]]
   * [[https://github.com/alvaroadlf/HEAD/blob/master/README.md|Todo sobre la cabecera <HEAD>]]
@@ Línea 68: / Línea 68: @@
    height: 100vw;
    max-width: 100%;
+}
+</sxh>
+  * También se pueden usar decimales con ''vw'' o ''vh''
+<sxh css>
+.c-titulo {
+    font-size: 3.14vw;
 }
 </sxh>
@@ Línea 79: / Línea 87: @@
 }
 </sxh>
+Otra forma de cambiar el ''font-size'' por defecto es configurar el tamaño de ''1rem'' en el propio navegador. Lo suele hacer gente con diversidad visual. En chrome es en "Configuración --> Aspecto --> Personalizar fuentes"
+Veamos ahora como se usa ''rem'' en bootstrap para los botones:
+^ Tamaño botón  ^  Tamaño de fuente  ^  Padding horizontal  ^  Padding vertical  ^
+| Normal  |  ''1rem''  |  ''0.75rem''  |  ''0.375rem''  |
+| Grande ''btn-lg'' |  ''1.25rem''  |  ''1rem''  |  ''0.5rem''  |
+| Pequeño ''btn-sm''  |  ''0.875rem''  |  ''0.5rem''  |  ''0.25rem''  |
+Vamos ahora los mismo datos pero en ''px'' suponiendo que el tamaño de fuente es ''16px''.
+^ Tamaño botón  ^  Tamaño de fuente  ^  Padding horizontal  ^  Padding vertical  ^
+| Normal  |  ''16px''  |  ''12px''  |  ''6px''  |
+| Grande ''btn-lg''  |  ''20px''  |  ''16px''  |  ''8px''  |
+| Pequeño ''btn-sm''  |  ''14px''  |  ''8px''  |  ''4px''  |
+Y por último veamos la relación que hay entre en padding y el tamaño de fuente en %
+^ Tamaño botón  ^  Padding horizontal respecto \\ del tamaño de fuente   ^  Padding vertical respecto \\ del tamaño de fuente  ^
+| Normal  |  75%  |  37,5%  |
+| Grande ''btn-lg''  |  80%  |  40%  |
+| Pequeño ''btn-sm''  |  57,142%  |  28,571%  |
+Resulta que no hay una relación constante entre el tamaño de la fuente y el tamaño del padding.
+Es decir para un tamaño normal el padding horizontal es el 75% del tamaño de la fuente pero
+en un botón grande (que el tamaño de fuente es más grande) el padding horizontal es el 80% del tamaño de la fuente
+y para terminar en un botón pequeño el padding horizontal es el 57% del tamaño de la fuente. ¿No debería ser constante el tamaño del padding respecto del tamaño de fuente? Por lo tanto si aumentamos el tamaño de fuente en el navegador , los padding no deberían aumentar proporcionalmente sino como vemos que lo hace bootstrap.
 ==== em ====
-La unidad ''rem'' hace referencia al tamaño de fuente del elemento donde está. El tamaño en píxeles se obtiene de multiplicar el valor de ''em'' por el tamaño de la fuente de ese elemento
+La unidad ''em'' hace referencia al tamaño de fuente del elemento donde está. El tamaño en píxeles se obtiene de multiplicar el valor de ''em'' por el tamaño de la fuente de ese elemento
 <note tip>Mi recomendación es usar siempre ''px'' ya que con los modificadores responsivos y nuestro sistema de tamaños , podemos controlar como queda todo.</note>
@@ Línea 155: / Línea 191: @@
 <sxh css>
 .c-titulo {
-    font-size: clamp(40px,calc(10vw - 10px),100px);
+    font-size: calc( ( 1 / 3 ) * 100vw);
 }
 </sxh>
+<sxh css>
+.c-titulo {
+    font-size: clamp(40px,10vw - 10px,100px);
+}
+</sxh>
+<note tip>Dentro de ''clamp'' se pueden hacer cálculos directamente sin necesidad de usar ''calc''.</note>
+<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:
+''calc(50%-8px)''
+debiendose corregir y quedando así:
+''calc(50% - 8px)''.
+Aunque los operadores ''*'' y ''/'' no necesitan espacio en blanco, se sugiere agregarlos por razones de consistencia.
+</note>
@@ Línea 166: / Línea 224: @@
+==== Calculo de valores con clamp ====
+La siguiente gráfica muestra como funciona ''clamp(200px, 59.88vw + 0.59px, 400px)''.
+{{ :clase:daw:diw:2eval:clamp.png |}}
+Para calcular los tamaños de pantalla donde se producen los cambios (puntos rojos) las variable son las siguientes:
+  * $w_{lower}$: El ancho de pantalla para el valor mínimo que es ''333px''.
+  * $w_{upper}$: El ancho de pantalla para el valor máximo que es ''667px''.
+  * $min_{value}$: El valor mínimo de la propiedad CSS que es ''200px''.
+  * $max_{value}$: El valor máximo de la propiedad CSS que es ''400px''.
+\\
+  * $pendiente$: El valor que se pone en ''vw'' que es ''59.88vw''..
+  * $coeficiente_{posición}$: Es el valor que se suma a la pendiente en ''px'' que es ''0.599px''.
+Pero, ¿como calculamos los valores de $pendiente$ y $coeficiente_{posición}$?.
+De forma genérica podemos establecer los valores de las 4 variables de la siguiente forma:
+{{ :clase:daw:diw:2eval:clamp_generico.png |}}
+Siendo los valores de $pendiente$ y $coeficiente_{posición}$ los siguientes:
+$$
+pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}} \cdot 100
+\\
+coeficiente_{posición}=min_{value} - \frac{pendiente}{100} \cdot w_{lower}
+$$
+Veamos el ejemplo en el que queremos que la propiedad ''font-size'' siga estas reglas:
+  * $w_{lower}$: 230px
+  * $w_{upper}$: 600px
+  * $min_{value}$: 12px
+  * $max_{value}$: 20px
+Entonces
+$$
+pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}} \cdot 100=\frac {20-12}{600-230} \cdot 100=2,1621622
+\\
+coeficiente_{posición}=min_{value} - \frac{pendiente}{100} \cdot w_{lower}=12-\frac{2,1621622}{100} \cdot 230=7,02702694
+$$
+Por lo tanto el css será:
+<sxh css>
+.c-titulo {
+    font-size: clamp(12px,2.1621622vw + 7.02702694px,20px);
+}
+</sxh>
+En la primera figura
+{{ :clase:daw:diw:2eval:clamp.png?300 |}}
+cuyos valores eran:
+  * $w_{lower}$: 333px
+  * $w_{upper}$: 667px
+  * $min_{value}$: 200px
+  * $max_{value}$: 400px
+Entonces
+$$
+pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}}\cdot 100=\frac {400-200}{667-333} \cdot 100=59.88
+\\
+coeficiente_{posición}=min_{value} - \frac{pendiente}{100} \cdot w_{lower}=200-\frac{59.88}{100} \cdot 333=0.5989
+$$
+Por lo tanto el css será:
+<sxh css>
+.c-titulo {
+    font-size: clamp(200px, 59.88vw + 0.5989px, 400px);
+}
+</sxh>
+  * 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  #b
+def decore_axes(axes,title,xlabel,ylabel):
+  axes.set_title(title, fontsize=14,pad=5,color="#000000")
+  axes.set_xlabel(xlabel, fontsize=10,labelpad=5,color="#003B80")
+  axes.set_ylabel(ylabel, fontsize=12,labelpad=5,color="#003B80")
+  axes.set_xlim(xmin=0)
+  axes.grid(visible=True, which='major', axis='both',color="#FFFFFF",linewidth=1)
+  axes.set_axisbelow(True)
+  axes.yaxis.set_major_locator(AutoLocator())
+  axes.set_facecolor('#E9F0FC')
+max_w_size=1200
+x=np.linspace(0,max_w_size,3000)
+y=[]
+for xi in x:
+  yi=xi*(pendiente/100)+coeficiente_posición
+  if (yi<min_value):
+    yi=min_value
+  elif (yi>max_value):
+    yi=max_value
+  y.append(yi)
+min_corte_x=((min_value-coeficiente_posición)*100)/pendiente
+max_corte_x=((max_value-coeficiente_posición)*100)/pendiente
+figure=plt.figure(figsize=(8,4))
+axes = figure.add_subplot(1,1,1)
+axes.plot(x,y)
+axes.scatter(min_corte_x,min_value,c="red", zorder=2)
+axes.scatter(max_corte_x,max_value,c="red", zorder=2)
+decore_axes(axes,f"clamp({min_value}px,{pendiente}vw + {coeficiente_posición}px,{max_value}px)","Tamaño pantalla","Valor propiedad CSS")
+_=axes.set_xticks( [0,min_corte_x,max_corte_x,max_w_size])
+</sxh>
 ===== Imágenes =====
 Hay muchas opciones al respecto de las imágenes responsivas. La técnica consiste principalmente en usar una imagen u otra en función de:
@@ Línea 231: / Línea 415: @@
             }
+            .c-table__head--width-1 {
+              width: 100px;
+              min-width: 100px;
+            }
+            .c-table__head--width-2 {
+              width: 150px;
+              min-width: 150px;
+            }
+            .c-table__head--width-3 {
+              width: 200px;
+              min-width: 200px;
+            }
         </style>
     </head>
@@ Línea 245: / Línea 440: @@
                 <th class="c-table__head c-table__head--min-width-2 c-table__head--max-width-3 ">Title</th>
                 <th class="c-table__head c-table__head--min-width-1 c-table__head--max-width-2">Year</th>
-                <th class="c-table__head c-table__head--min-width-1 c-table__head--max-width-2">ISBN-13</th>
+                <th class="c-table__head c-table__head--width-3">ISBN-13</th>
-                <th class="c-table__head c-table__head--min-width-1 c-table__head--max-width-2">ISBN-10</th>
+                <th class="c-table__head c-table__head--width-2">ISBN-10</th>
               </tr>
             </thead>
@@ Línea 387: / Línea 582: @@
 @media (min-width: 576px) {
-    .g--font-size-1\@movil {
+    .g--font-size-1\@tablet {
         font-size: 40px;
     }
-    .g--font-size-2\@movil {
+    .g--font-size-2\@tablet {
         font-size: 50px;
     }
-    .g--font-size-3\@movil {
+    .g--font-size-3\@tablet {
         font-size: 55px;
     }
-    .g--font-size-4\@movil {
+    .g--font-size-4\@tablet {
         font-size: 70px;
     }
@@ Línea 402: / Línea 597: @@
 @media (min-width: 768px) {
-    .g--font-size-1\@tablet {
+    .g--font-size-1\@desktop {
         font-size: 40px;
     }
-    .g--font-size-2\@tablet {
+    .g--font-size-2\@desktop {
         font-size: 50px;
     }
-    .g--font-size-3\@tablet {
+    .g--font-size-3\@desktop {
         font-size: 55px;
     }
-    .g--font-size-4\@tablet {
+    .g--font-size-4\@desktop {
         font-size: 70px;
     }
@@ Línea 417: / Línea 612: @@
 @media (min-width: 992px) {
-    .g--font-size-1\@desktop {
+    .g--font-size-1\@fulldesktop {
         font-size: 40px;
     }
-    .g--font-size-2\@desktop {
+    .g--font-size-2\@fulldesktop {
         font-size: 50px;
     }
-    .g--font-size-3\@desktop {
+    .g--font-size-3\@fulldesktop {
         font-size: 55px;
     }
-    .g--font-size-4\@desktop {
+    .g--font-size-4\@fulldesktop {
         font-size: 70px;
     }
@@ Línea 433: / Línea 628: @@
 <sxh html>
-<p class="g--font-size-1  g--font-size-3@desktop">Hola mundo</p>
+<p class="g--font-size-1  g--font-size-3@fulldesktop">Hola mundo</p>
 </sxh>
 En el ejemplo por defecto el tamaño de la fuente será de 40px pero en resoluciones mayores de 992px será de 55px.
-Lo que hacemos es crear todas los modificadores globales o modificadores de bloques para las distintas resoluciones pero añadiendo el sufijo ''@movil'' , ''@tablet'' o ''@desktop''. E indicando en el HTML que tamaño usar según la resolución de la pantalla.
+Lo que hacemos es crear todas los modificadores globales o modificadores de bloques para las distintas resoluciones pero añadiendo el sufijo  ''@tablet'' , ''@desktop'' o ''@fulldesktop''. E indicando en el HTML que tamaño usar según la resolución de la pantalla.
 Otro ejemplo de ello lo podemos ver en [[https://www.webstoemp.com/blog/notes-on-using-css-grid-in-production/|Notes on using CSS Grid in production]]
@@ Línea 448: / Línea 643: @@
   * [[https://dev.to/polypane/css-breakpoints-used-by-popular-css-frameworks-hl9|CSS breakpoints used by popular CSS frameworks]]
-  * [[https://gist.github.com/ptibbetts/7b726ae20914c11eb953fdfdf3ee34ed|Comparing Breakpoints in CSS Toolkits and Frameworks]]
+  * [[https://gist.github.com/paultibbetts/7b726ae20914c11eb953fdfdf3ee34ed|Comparing Breakpoints in CSS Toolkits and Frameworks]]
@@ Línea 471: / Línea 666: @@
 ===== Menu responsivo =====
-{{menu.zip|}}
+{{..:1eval:menu.zip|}}
 <sxh html;title: HTML>
@@ Línea 569: / Línea 764: @@
 ^ ^  Interno  ^  Externo  ^
-^  Fluido  | El propio componente decide como se hace responsivo y lo hace de forma fluida al tamaño del dispositivo. | El que usa el componente decide como se haca responsivo y lo hace de forma fluida al tamaño del dispositivo.  |
+^  Fluido  | El propio componente decide como se hace responsivo y lo hace de forma fluida al tamaño del dispositivo. | El que usa el componente decide como se hace responsivo y lo hace de forma fluida al tamaño del dispositivo.  |
-^  Escalonado  | El propio componente decide como se hace responsivo y lo hace solo para diversos tamaños de pantalla | El que usa el componente decide como se haca responsivo y lo hace solo para diversos tamaños de pantalla |
+^  Escalonado  | El propio componente decide como se hace responsivo y lo hace solo para diversos tamaños de pantalla | El que usa el componente decide como se hace responsivo y lo hace solo para diversos tamaños de pantalla |
@@ Línea 577: / Línea 772: @@
 </note>
-  * Interno/Fluido: Se suele usar con imágenes.
+  * Interno/Fluido: Las tablas
 <sxh css>
@@ Línea 589: / Línea 784: @@
-  * Interno/Escalonado: Se usa en un menú responsivo con amburguesa.
+  * Interno/Escalonado: Se usa en un menú responsivo con hamburguesa.
 <sxh css>
@@ Línea 621: / Línea 816: @@
 </sxh>
-  * Externo/Escalonado: es que que usamos con ''@movil'' o ''@tablet'' , etc.
+  * Externo/Escalonado: Es el que usamos con ''@tablet'' o ''@desktop'' , etc.
 <sxh html>
@@ Línea 636: / Línea 831: @@
   * 1 div cuadrado azul de tamaño 400px
   * 1 div cuadrado verde de tamaño 400px
-  * Dentro cada cuadrado azul , añade otro div de color rojo con tamaño 10%
+  * Dentro cada cuadrado azul , añade otro div de color rojo con tamaño 20%
-  * Dentro cada cuadrado verde , añade otro div de color rojo con tamaño 10vw
+  * Dentro cada cuadrado verde , añade otro div de color rojo con tamaño 20vw
 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
@@ Línea 682: / Línea 877: @@
 ==== Ejercicio 5 ====
-Dado el típico layout de cabecera, menú lateral, cuerpo y pie. Haz una página HTML pero de forma que si el tamaño de la pantalla es menor que 500px no se vea el menú lateral. Deberás hacerlo usando BEM
+Dado el típico layout de cabecera, menú lateral, cuerpo y pie. Haz una página HTML pero de forma que si el tamaño de la pantalla es menor que 500px no se vea el menú lateral. Deberás hacerlo usando BEM e externo.
 ==== Ejercicio 6 ====
+Crea una clase css llamada ''.g--color-fondo-responsivo'' de forma que cambia el color de fondo si el ancho del dispositivo (o ventana) tiene:
+  * Menos de 576px sea de color rojo
+  * Entre 576px y 768px sea de color verde
+  * Entre 768px y 992px sea de color azul
+  * Más de 992px sea de color naranja
+Lo usarán en una página HTML donde estará un cuadrado de 200px x 200px
+==== Ejercicio 7 ====
+Crea las siguientes clases css:
+<sxh css>
+.g--bg-color-red {
+  background-color:#FF0000;
+}
+.g--bg-color-green {
+  background-color:#00FF00;
+}
+.g--bg-color-blue {
+  background-color:#0000FF;
+}
+.g--bg-color-orange {
+  background-color:#FFA500;
+}
+</sxh>
+Y modificalas con el sufijo "@tabled", "@desktop" y "@fulldesktop" y repite el ejercicio anterior pero en vez de usar la clase ''.g--color-fondo-responsivo'' uses las clases que acabas de crear
+==== Ejercicio 8 ====
 Crea modificadores globales para las siguientes propiedades CSS:
   * ''width''
@@ Línea 705: / Línea 931: @@
   * Que si la tabla no cabe, aparezcan las barras de scroll.
-==== Ejercicio 7 ====
+==== Ejercicio 9 ====
 Modifica el ejercicio anterior de forma que ahora los modificadores globales se puedan usar de forma responsiva con
-  * @movil
   * @tablet
   * @desktop
+  * @fulldesktop
 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 8 ====
+==== 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
+  * @fulldesktop
-==== Ejercicio 9 ====
+==== 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 :
   * El tamaño de los títulos

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página