Repasamos como subir los resúmenes de las clases (también sirve para sugerir cualquier cambio en la página)
⚠️ La sugerencia de cambios es justamente eso, una sugerencia. Primero deben ser revisados y aceptados por el dueño del archivo (En este caso, el profesor Tehuel). Los cambios no son automáticos. ⚠️
Paso 4: Seleccionar la opción Add file (agregar documento)
Paso 5: Seleccionar la opción Create new file (crear un archivo nuevo). Aclaración: también está la opción Upload file (cargar archivo) pero en el repositorio de nuestra página, esa opción no está habilitada.
Paso 6: Colocarle nombre y contenido al archivo. Aclaración: Para nuestra página, los nombres deben ser la fecha de la clase a la que corresponda el resumen y en este orden: Año-Mes-Día.md (ejemplo: 2022-04-18.md)
Paso 7: Seleccionar la opción aceptar/proponer cambios.
Paso 8 (Opcional): Agregar un comentario a la sugerencia.
Paso 9: Tendremos una previsualización de los cambios que estamos sugiriendo para poder revisarlos. Seleccionamos la opción Create pull request (Crear la solicitud de subida)
Paso 10: Idem paso 9.
Repaso de la clase anterior
Repasamos algunas de las cosas que vimos en la clase anterior.
Páginas con diseño responsivo
A través de la herramienta inspeccionar, en la sección Togle device toolbar (se puede acceder con Ctrl+Shift+M, habiendo abierto la pestaña inspeccionar de antemano) de los navegadores, vimos cómo es el diseño responsivo de algunas páginas, por ejemplo: A list apart.
Media Queries II
Usamos la página MDN para ver diferentes ejemplos de medias queries.
Propiedades
Width: Corresponde al ancho de la página. Existen:
Width: Para un ancho específico.
Max-width: Para un ancho máximo.
Min-width: Para un ancho mínimo.
Vimos las diferentes posibilidades de aplicación para esta propiedad en una página cualquiera.
Operadores lógicos y sintaxis
Vimos cómo usar los operadores lógicos “not” y “and” en una media query. También repasamos un poco la sintaxis de las queries.
Para anidar reglas en una query, podemos utilizar and. Por ejemplo:
@media (min-width: 700px) and (orientation: landscape) { ... }
Si se utiliza esta forma, ambas reglas deben cumplirse para que se aplique el diseño asignado.
Para separar dos o más reglas en una query, podemos utilizar la coma, esto funciona como un operador “or”. Por ejemplo:
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
Si se utiliza esta forma, con que una sola regla se cumpla, se aplicará el diseño asignado.
El operador not sirve para negar una query. Si tiene reglas separadas por ands, negará toda la query; si las reglas están separadas por comas, se niega solo la regla que tenga el not.