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:
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
Posicionamiento CSS
Unidades CSS
https://www.w3schools.com/cssref/css_units.asp
https://gist.github.com/basham/2175a16ab7c60ce8e001
https://getflywheel.com/layout/choose-css-unit-create-better-site-layouts-how-to/
Buenas prácticas:
https://sbsharma.com/best-practice-css-units/
https://medium.com/swlh/css-units-which-ones-to-use-and-avoid-31e4ed461f9
Ejercicio Layout
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:
Selectores CSS
https://www.w3schools.com/css/css_selectors.asp
https://www.internetingishard.com/html-and-css/css-selectors/
Pero mejor no memorizarlos 😉
En esta página de w3schools se muestran diferentes tipos de selectores css:
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); } } }