logongas

Herramientas de usuario

Herramientas del sitio

Ocultar Menú
Traza: • 7. Despliegue básico en servidor • 8 Métricas y Evaluación de redes neuronales
clase:daw:diw:1eval:tema04

Diferencias

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

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión 		Revisión previa
clase:daw:diw:1eval:tema04 [2023/11/21 17:05]
admin [Bucle @for to] 		clase:daw:diw:1eval:tema04 [2024/12/01 16:47] (actual)
admin [Condicional @if]
Línea 12: Línea 12:
     * [[https://sass-lang.com/documentation/at-rules/control/each#with-maps|sass: @each with maps]]     * [[https://sass-lang.com/documentation/at-rules/control/each#with-maps|sass: @each with maps]]
  
 +Curso de SASS:
 +  * [[https://www.chucksacademy.com/es/topic/css-preprocessors|Preprocesadores de CSS]]
 ===== Mixings ===== ===== Mixings =====
 Son como trozos de código CSS que puedes añadir en otra clase CSS. Es como llamar a una "función" pero con CSS. Son muy útiles para evitar repetir código CSS. Son como trozos de código CSS que puedes añadir en otra clase CSS. Es como llamar a una "función" pero con CSS. Son muy útiles para evitar repetir código CSS.
Línea 127: Línea 129:
  
 ===== Bucle @for to ===== ===== Bucle @for to =====
-Se usa para hacer bucle dese 0 a n-1+Se usa para hacer un bucle desde ''0'' a ''n-1''
  
   * Bucle con índice.   * Bucle con índice.
Línea 162: Línea 164:
  
 ===== Bucle @for through ===== ===== Bucle @for through =====
-Es un bucle desde el valor inicial al final+Se usa para hacer un bucle desde ''1'' hasta ''n''
  
   * Bucle con índice.   * Bucle con índice.
 <sxh sass> <sxh sass>
-@for $i from 0 through 4 {+@for $i from 1 through 4 {
   .g--border-#{$i} {      .g--border-#{$i} {   
       border: 10px * $i solid #00FF00;        border: 10px * $i solid #00FF00; 
Línea 177: Línea 179:
  
 <sxh css> <sxh css>
-.g--border-0 { 
-  border: 0px solid #00FF00; 
-} 
- 
 .g--border-1 { .g--border-1 {
   border: 10px solid #00FF00;   border: 10px solid #00FF00;
Línea 198: Línea 196:
 </sxh> </sxh>
  
-<note important>El bucle anterior va de 0 a 4. El decir al último elemento **SI** se llega.</note> 
  
  
Línea 271: Línea 268:
 <sxh sass> <sxh sass>
 @mixin border($size) { @mixin border($size) {
-  $color:#00FF00;+
          
   @if $size>=3 {   @if $size>=3 {
     $color:#FF0000;     $color:#FF0000;
 +  } @else {
 +    $color:#00FF00;
   }   }
  
Línea 466: Línea 465:
 </note> </note>
  
 +Algunas de las variables de colores en la página principal de google, ¿te suena de algo?:
 +
 +{{:clase:daw:diw:1eval:colores.png|}}
 +
 +
 +=== Ejemplo de menu lateral ===
 +Ejemplo de menú lateral con variable locales.
 +Código de Àngela Hermosilla del Río
 +
 +{{:clase:daw:diw:1eval:menu-lateral.png?200|}}
 +
 +<sxh sass>
 +.c-menu-lateral {
 +    --c-menu-logo-font-size: var(--font-size-l);
 +    --c-menu-option-titulo-font-size: var(--font-size-m);
 +    --c-menu-option-subtitulo-font-size: var(--font-size);
 +
 +    --c-menu-font-family: var(--font-family-arial);
 +
 +    --c-menu-option-titulo-color: var(--color-grey-1);
 +    --c-menu-option-subtitulo-color: var(--color-grey);
 +    --c-menu-option-titulo-color-warning: var(--color-red-3);
 +    --c-menu-option-subtitulo-color-warning: var(--color-red-4);
 +
 +    --c-menu-background-color: var(--color-grey-9);
 +    --c-menu-background-color-hover: var(--color-grey-8);
 +    --c-menu-background-color-warning: var(--color-red-9);
 +    --c-menu-background-color-warning-hover: var(--color-red-8);
 +
 +    --c-menu-padding-exterior: var(--padding-4);
 +    --c-menu-padding-interior: var(--padding-2);
 +
 +    --c-menu-width: var(--width-300);
 +    --c-menu-width-icono:var(--width-30);
 +
 +    
 +    display: grid;
 +    grid-template-rows: auto 1fr auto;
 +    padding:var(--c-menu-padding-exterior);
 +    
 +    &__logo {
 +        font-size: var(--c-menu-logo-font-size);
 +        padding: var(--c-menu-padding-exterior);
 +        background-color: var(--c-menu-background-color);
 +        
 +    }
 +
 +    &__opciones{
 +        overflow: auto;
 +    }
 +
 +    &__opcion {
 +        display: flex;
 +        flex-direction: row;
 +        padding: var(--c-menu-padding-exterior);
 +        background-color: var(--c-menu-background-color);
 +
 +        &-icono{
 +            padding: var(--c-menu-padding-exterior);
 +            width: var(--c-menu-width-icono);
 +        }
 +        &-titulo{
 +            font-weight: bold;
 +            font-size: var(--c-menu-option-titulo-font-size);
 +            color: var(--c-menu-option-titulo-color);
 +            padding: var(--c-menu-padding-interior);
 +            
 +            &--warning{
 +                color: var(--c-menu-option-titulo-color-warning);
 +            }
 +        }
 +        &-subtitulo{
 +            font-size: var(--c-menu-option-subtitulo-font-size);
 +            color: var(--c-menu-option-subtitulo-color);
 +            padding: var(--c-menu-padding-interior);
 +
 +            &--warning{
 +                color: var(--c-menu-option-subtitulo-color-warning);
 +            }
 +        }
 +        
 +        &--warning{
 +            color: var(--c-menu-background-color-warning);
 +            @include border(var(--c-menu-background-color-warning-hover),var(--border-radius-2));
 +
 +            :hover{
 +                color: var(--c-menu-background-color-warning-hover);
 +            }
 +        }
 +
 +        :hover{
 +            background-color: var(--c-menu-background-color-hover);
 +        }
 +    }
 +
 +    &__footer {
 +        font-size: var(--c-menu-logo-font-size);
 +        padding: var(--c-menu-padding-exterior);
 +        background-color: var(--c-menu-background-color);
 +        
 +    }
 +}
 +
 +</sxh>
 +
 +
 +<sxh html>
 +    <div class="c-menu-lateral">
 +
 +        <div class="c-menu-lateral__logo">
 +            Ajuda DANA
 +        </div>
 +
 +        <div class="c-menu-lateral__opciones">
 +            <div class="c-menu-lateral__opcion">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-house fa-lg"></i>
 +                </div>
 +                <div class="c-menu-lateral__opcion-titulo">
 +                    Inicio
 +                </div>
 +            </div>
 +
 +            <div class="c-menu-lateral__opcion c-menu-lateral__opcion--warning">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-circle-exclamation fa-lg g--color-red-3"></i>
 +                </div>
 +                <div>
 +                    <div class="c-menu-lateral__opcion-titulo c-menu-lateral__opcion-titulo--warning">
 +                        Casos activos
 +                    </div>
 +                    <div class="c-menu-lateral__opcion-subtitulo c-menu-lateral__opcion-subtitulo--warning">
 +                        Ver todos los casos activos
 +                    </div>
 +                </div>
 +            </div>
 +
 +            <div class="c-menu-lateral__opcion">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-temperature-quarter fa-lg g--color-yellow"></i>
 +                </div>
 +                
 +                <div>
 +                    <div class="c-menu-lateral__opcion-titulo">
 +                        Voluntómetro
 +                    </div>
 +                    <div class="c-menu-lateral__opcion-subtitulo">
 +                        Medidor de voluntarios por localidad
 +                    </div>
 +                </div>
 +            </div>
 +
 +            <div class="c-menu-lateral__opcion">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-magnifying-glass fa-lg g--color-red-4"></i>
 +                </div>
 +                
 +                <div>
 +                    <div class="c-menu-lateral__opcion-titulo">
 +                        Solicitar ayuda
 +                    </div>
 +                    <div class="c-menu-lateral__opcion-subtitulo">
 +                        Si necesitas asistencia
 +                    </div>
 +                </div>
 +            </div>
 +        
 +            <div class="c-menu-lateral__opcion">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-heart fa-lg g--color-green-4"></i>
 +                </div>
 +                
 +                <div>
 +                    <div class="c-menu-lateral__opcion-titulo">
 +                        Ofrecer ayuda
 +                    </div>
 +                    <div class="c-menu-lateral__opcion-subtitulo">
 +                        Si puedes ayudar a otros
 +                    </div>
 +                </div>
 +            </div>
 +
 +            <div class="c-menu-lateral__opcion">
 +                <div class="c-menu-lateral__opcion-icono">
 +                    <i class="fa-solid fa-person fa-lg g--color-purple-4"></i>
 +                </div>
 +                
 +                <div>
 +                    <div class="c-menu-lateral__opcion-titulo">
 +                        Desaparecidos
 +                    </div>
 +                    <div class="c-menu-lateral__opcion-subtitulo">
 +                        Reportar o buscar
 +                    </div>
 +                </div>
 +            </div>
 +
 +
 +        </div>
 +
 +        <div class="c-menu-lateral__footer">
 +            <p class="c-menu-lateral__opcion-text c-menu-lateral__opcion-text--titulo">
 +                <i class="fa-solid fa-arrow-right-to-bracket g--color-grey-4"></i>  Inicio sesion
 +            </p>
 +        </div>
 +
 +    </div>
 +</sxh>
 ===== Bootstrap ===== ===== Bootstrap =====
 En el siguiente artículo [[https://getbootstrap.com/docs/5.0/utilities/api/|Utility API]], vemos como Boostrap ha creado algo muy similar a lo que estamos haciendo en clase. En el siguiente artículo [[https://getbootstrap.com/docs/5.0/utilities/api/|Utility API]], vemos como Boostrap ha creado algo muy similar a lo que estamos haciendo en clase.
Línea 529: Línea 736:
 ==== Ejercicio 4 ==== ==== Ejercicio 4 ====
 Modifica la clase ''c-button'' del tema 1 para que ahora haga uso de variables CSS en los paddings, etc. Modifica la clase ''c-button'' del tema 1 para que ahora haga uso de variables CSS en los paddings, etc.
 +
 +==== Ejercicio 5 ====
 +Dado la siguiente variable de SASS llamada ''$utilities$''
 +
 +<sxh sass>
 +$utilities: (
 +  "padding": (
 +    type:0,
 +    property: padding,
 +    class: g--padding-,
 +    values: (
 +      1: 1px,
 +      2: 5px,
 +      3: 10px,
 +      4: 20px,
 +      5: 40px,
 +    )
 +  ),
 +  "font-size": (
 +    type:1,
 +    property: font-size,
 +    class: g--font-size-,
 +    values: (6px,7px,10px,12px,14px,16px,18px,20px)
 + ),
 +  "width": (
 +    type:2,
 +    property: width,
 +    class: g--width-,
 + max:9
 + ),
 +   "$keys": ( xxxxs,xxxs,xxs,xs,s,m,l,xl,xxl,xxxl )  
 +  
 +  
 + );
 +</sxh>
 +
 +Que crea un programa en SASS para que genere el siguiente CSS:
 +
 +<sxh CSS>
 +.g--padding-1 {   padding: 1px; }
 +.g--padding-2 {   padding: 5px; }
 +.g--padding-3 {   padding: 10px; }
 +.g--padding-4 {   padding: 20px; }
 +.g--padding-5 {   padding: 40px; }
 +.g--font-size-xxxxs {   font-size: 6px; }
 +.g--font-size-xxxs {   font-size: 7px; }
 +.g--font-size-xxs {   font-size: 10px; }
 +.g--font-size-xs {   font-size: 12px; }
 +.g--font-size-s {   font-size: 14px; }
 +.g--font-size-m {   font-size: 16px; }
 +.g--font-size-l {   font-size: 18px; }
 +.g--font-size-xl {   font-size: 20px; }
 +.g--width-1 {   width: 1px; }
 +.g--width-2 {   width: 4px; }
 +.g--width-3 {   width: 9px; }
 +.g--width-4 {   width: 16px; }
 +.g--width-5 {   width: 25px; }
 +.g--width-6 {   width: 36px; }
 +.g--width-7 {   width: 49px; }
 +.g--width-8 {   width: 64px; }
 +.g--width-9 {   width: 81px; }
 +</sxh>
 +
 +Usa siempre que puedas funciones de SASS
 +
 +<nodisp>
 +
 +<sxh>
 +@function getKeyFromIndex($index) {
 + $key:$index*10;
 + @return $key;
 +}
 +
 +@function getValueFromIndex($index) {
 + $value:$index*$index*1px;
 + @return $value;
 +}
 +
 +
 + 
 +$prefix: ".";
 +
 +@each $utility-key, $utility in $utilities {
 + @if ($utility-key!= "$keys") {
 + $type: map-get($utility, usekeys);
 + $property: map-get($utility, property);
 + $class: map-get($utility, class);
 +
 +
 + @if ($type==0) {
 + $values: map-get($utility, values);
 + @each $key, $value in $values {
 + #{$prefix}#{$class}#{$key} {
 + #{$property}: #{$value};
 + }
 + }
 + }
 + @if ($type==1){
 + $keys:map-get($utilities,"$keys");
 + $values: map-get($utility, values);
 + @for $index from 1 through length($values) {
 + $key: nth($keys,$index);
 + $value:nth($values,$index);
 +
 + #{$prefix}#{$class}#{$key} {
 + #{$property}: $value;
 + }
 + }
 + } 
 + @if ($type==2){
 + $max:map-get($utility, max);
 + @for $index from 1 through $max {
 + $key: getKeyFromIndex($index);
 + $value:getValueFromIndex($index);
 +
 + #{$prefix}#{$class}#{$key} {
 + #{$property}: $value;
 + }
 + }
 + }
 + }
 +}
 +
 +</sxh>
 +</nodisp>
 +
 +==== Ejercicio 6 ====
 +Sabiendo que ya tienes los botones del tema 1.
 +
 +Vamos ahora a hacer el componente ''c-dialog''.
 +
 +
 +<sxh html>
 +<div class="c-dialog">
 + <div class="c-dialog__title">
 + Ventana modal
 + <button class="c-dialog__close">
 + </div>
 + <div class="c-dialog__body">
 + bla bla
 +
 + <button class="c-button">Cancelar</button>
 + </div>
 +</div>
 +</sxh>
 +
 +{{:clase:daw:diw:1eval:evolucion_modal.png?1000|}}
 +
 +Crea 3 mixing para reusar el CSS de ''c-button'' y ''c-dialog__close'':
 +  * ''button-border''
 +  * ''button-background''
 +  * ''button-text''
 +
 +
clase/daw/diw/1eval/tema04.1700582717.txt.gz · Última modificación: 2023/11/21 17:05 por admin

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki