Mini ejercicio grid

Cread un contenedor que tenga borde y fondo (para poder distinguirlo) y cread dentro un grid de 4 columnas iguales y 3 filas la del medio el doble que la inferior y la superior. Para poder ver si lo estamos haciendo bien podéis poner dentro 12 divs con un borde y un fondo también.

CSS Grid

Un paso más allá del flexbox es utilizar el CSS Grid, que nos permite utilizar una cuadrícula en la página, y que los elementos se posicionen en las coordenadas que queramos:

https://www.w3schools.com/css/css_grid.asp

Aquí tenemos una guía completa de cómo usar CSS grid:

https://css-tricks.com/snippets/css/complete-guide-grid/

Otra guía, en castellano y bien explicada:

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-grid-layout/

Y otra más también muy bien explicada:

https://medium.com/@alexcamachogz/dominando-css-grid-ff916434f85a

Interactiva:

https://www.joshwcomeau.com/css/interactive-guide-to-grid/

Buenas prácticas:

https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/

Un juego para practicar grid:

https://cssgridgarden.com/#es

Usar flexbox o grid?

https://blog.logrocket.com/flexbox-vs-css-grid/

https://programacion.net/articulo/css_grid_vs_flexbox_cual_es_mas_practico_1771

Ejercicio Layout

Crear un layout con flex (y todos los conocimientos adquiridos) parecido a este:

No tiene por qué ser igual, mucho menos el mismo tema, pero sí que tenga esas secciones, divisiones, etcétera. No tiene que ser responsive porque todavía no hemos hecho media queries.

Flexbox

Hoy hemos visto una manera más eficiente de maquetar, utilizando la propiedad Flexbox. En w3schools la explican bien:

https://www.w3schools.com/css/css3_flexbox.asp

http://www.emenia.es/flexbox-la-caja-flexible-css3/

Podemos ver las propiedades de una manera muy visual aquí:

https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

Aquí lo podemos ver animado:

https://jstutorial.medium.com/flexbox-the-animated-tutorial-8075cbe4c1b2
Flexbox el tutorial animado

Y aquí otra guía completa:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Templates con flexbox:

https://www.quackit.com/html/templates/css_flexbox_templates.cfm

Cómo calcular como crecen y se encogen los elementos (no es tan sencillo como parece):

https://ed.team/blog/guia-definitiva-de-flexbox-2-flex-basis-flex-frow-flex-shrink

Ejemplos prácticos de cómo hacer cosas con flexbox:

https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

18 recursos interesantes:

https://bashooka.com/coding/css3-flexbox-resources/

https://www.chenhuijing.com/blog/flexbox-and-absolute-positioning/

Un juego para aprender flexbox:

https://flexboxfroggy.com/#es

Ejercicio form

Crear un formulario que nos pida los siguientes datos:

Nombre
Edad
Email
Tipo de problema (urgente, muy urgente, para ayer)
Fecha
Es cliente o no
Es Premium o no
Observaciones

Elegid los tipos de objeto que creáis conveniente para cada dato.

JSON dnámico

 static async Task Main(string[] args)
    {
        // URL del JSON
        string url = "https://jsonplaceholder.typicode.com/posts";

        // Leer el JSON de la URL
        var json = await ObtenerJsonDesdeUrl(url);

        // Deserializar el JSON en un tipo anónimo
        var datos = JsonSerializer.Deserialize<dynamic>(json, new JsonSerializerOptions
        {
            PropertyNameCaseInsensitive = true
        });

        // Iterar y mostrar datos
        foreach (var elemento in datos)
        {
            Console.WriteLine($"ID: {elemento.id}, Título: {elemento.title}");
        }
    }

    // Método para obtener el JSON desde una URL
    public static async Task<string> ObtenerJsonDesdeUrl(string url)
    {
        using HttpClient client = new HttpClient();
        var response = await client.GetAsync(url);
        response.EnsureSuccessStatusCode(); // Lanza excepción si el estado no es 2xx
        return await response.Content.ReadAsStringAsync();
    }
}

Mockup

using CapaServicio.Controllers;
using CapaServicio.Models;
using CapaServicio.Repository;
using CapaServicio.Service;
using Microsoft.AspNetCore.Mvc;
using Moq;

namespace CapaTest
{

    public class UnitTest1
    {
        private Mock<IAlumnoService> _mockService;
        private AlumnoesController _controller;

        public UnitTest1()
        {
            // Crear el mock del servicio y configurar su comportamiento
            _mockService = new Mock<IAlumnoService>();
            // Esto son datos falsos de prueba que será lo que obtengamos cuando
            // El controlador llame al servicio
            _mockService.Setup(s => s.ObtenerTodos()).Returns(new List<Alumno> { new Alumno(), new Alumno() });
            _mockService.Setup(s => s.ObtenerPorId(2)).Returns(new Alumno());

            //// Crear una instancia del controlador con el mock del servicio
            _controller = new AlumnoesController(_mockService.Object);
        }

        [Fact]
        public async Task Test1Async()
        {
            // Aquí verifico el index
            var result = await _controller.Index() as ViewResult;

            // Verificar
            Assert.NotNull(result);
            // Compruebo, por ejemplo, que el modelo es una lista de alumnos
            Assert.IsType(typeof(List<Alumno>), result.Model);
            Assert.Equal(2, ((List<Alumno>)result.Model).Count);

            // Aquí verifico el Details con un id 2
            result = await _controller.Details(2) as ViewResult;
            Assert.NotNull(result);
            // Compruebo que el modelo sea alumno...
            Assert.IsType(typeof(Alumno), result.Model);


        }
    }
}