borrador clase css

modulos/2-diseño-web/2-css.mdx

@@ -0,0 +1,163 @@
+import { themes, Image } from 'mdx-deck'
+import cookiesAlgoritm from '../../assets/cookies-algoritm.png'
+import memoryScheme from '../../assets/memory-scheme.png'
+
+export const theme = themes.book
+
+# Introduccion a CSS
+
+* Bautista Di Santo
+
+---
+
+## CSS - clase 1: intro a css, sintaxis, box model, default styles
+* intro, qué es  cascading style sheet?.
+* composición de una regla en css
+* cómo aplicar css, estilos en línea o externos, sintaxis: clases e id.
+* especificidad (jerarquía de selectores).
+* modelo de caja.
+* block e inline elements
+* flexbox
+* Extras
+
+---
+
+## ¿Qué es  cascading style sheet?
+* CSS es un lenguaje usado para cear interfazes a partir de un documento escrito en markup.
+* CSS describe como los elementos de html (tags) se van a mostrar en nuestra pagina y controla el layout de nuestras html tags.
+* Sirve para estilizar nuestra pagina y hacer interfazes mas amigables para los usuarios que van a consumir el producto final.
+
+---
+
+# SIRVE PARA HACER CAJITAS
+
+---
+
+# composición de una regla en css
+
+Una regla de CSS esta compuesta por los siguientes elementos: un selector y una declaracion => una propiedad y su valor.
+
+<Steps>
+
+* selector { propiedad: valor; }
+* p { color: red; } 
+* /[[*]] esto es un comentario [[*]]/
+
+</Steps>
+
+---
+
+## Aplicando CSS
+
+hay tres formas dieferentes de aplicar CSS, estilos en linea, estilos internos y estilos externos
+
+* En linea: 
+simplemente declaramos nuestra regla adentro de una propiedad que se le puede dar a nuestra etiqueta HTML <!-- <p style="color:red;"> esto es texto simple </p> -->
+* Internos: 
+al final de nuestro documento html podemos hacer un apartado abriendo las etiquetas <!-- <style></style> -->, dentro de estas escribimos nuestras reglas.
+* Externos: podemos crear un archivo .css, e importarlo a nuestro html con la etiqueta <!-- link --> 
+
+---
+
+## Selectores simples
+
+Los elementos HTML pueden ser seleccionados por medio de: 
+
+* Etiqueta
+* ID 
+* Clase
+
+---
+
+## especificidad (jerarquía de selectores).
+
+A veces una etiqueta html puede tener varios selectores al mismo tiempo y sus diferentes reglas pueden compartir 
+las mismas propiedades. Cuando pasa esto el motor de renderizado debe decidir a cual de los 
+selectores hacerle caso para mostrar nuestros elemento en pantalla, esto lo soluciona organizando las 
+reglas por jerarquia, y esta se maneja de la siguiente forma:
+
+* ID
+* Clases
+* Tag
+
+---
+
+## colores en CSS
+
+ los color en CSS se puede aplicar de las siguientes formas: RGB (red, green, blue), HEX (hexadecimal), HSL (hue, saturation, lightness), RGBA (alpha), HSLA (alpha)
+
+* con color podemos cambiar calbiar el color del texto
+* con background color podemos cambiar el color del fondo
+* con border podemos darle bordes a los elementos y cambiar su grosor estilo y color
+
+---
+
+## Box model
+
+el modelo de caja es una herramienta que nos permite espaciar nuestro contenido en una caja compuesta por:
+* margin (el espacio separando la caja de los otros elementos)
+* padding (el espacio entre el borde de la caja y el contenido)
+* border (el borde)
+    -border, border radius
+* content (uwu)
+* width & height
+    medidas fijas, y fit-content
+
+---
+
+## Block and inline elements
+
+* Elementos block-level: siempre se aplilan en columna, toman el ancho de la pagina.
+* Elementos inline: se apilan uno al lado del otro, toman el ancho y altura de su contenido. 
+
+---
+
+## Flexbox
+
+* Para empezar a usar flexbox tenemos que definir un contenedor flexible con la propiedad: 
+    -display: flex
+* Flex-direction define para que direccion se van a acomodar nuestros items
+    -row, column, row-reverse, column-reverse
+* Flex-wrap sirve para que nuestro contenedor acomode los items que tiene dentro si exeden el ancho o altura de este
+    -display: flex-wrap
+* Flex-flow mezcla las dos propiedades de la siguiente forma en el valor de este se indica la direccion y el comportamiento ej: 
+    -flex-flow: row-wrap 
+
+---
+
+## Justify-content
+
+Justify-content alinea los items en el eje vertical
+
+<Steps>
+
+* flex-end envia los objetos al final del contenedor 
+* flex-start los pone al principio
+* flex-center los centra
+
+</Steps>
+
+---
+
+## Align-items
+
+Align-items alinea los items en el eje horizontal
+
+* flex-end envia los objetos al final del contenedor 
+* flex-start los pone al principio
+* flex-center los centra
+
+---
+
+## Cosas extra.
+
+* Agregando fuentes
+* Inline-block al usar esta propiedad podemos darle ancho, alto, margin top/bottom, padding top/bottom a nuestro elemento, a su vez esto hace que que nuestro elemento pueda aparecer al lado de otros y se apile como lo haria un elemento block-level  
+* Acostumbrarse a usar el inspector de elementos
+* Todos los elementos de html tienen estilos por default, esto puede variar dependiendo del browser: https://browserdefaultstyles.com
+* https://w3schools.com/css/default.asp
+
+---
+
+# CHAU
+

modulos/2-diseño-web/3-css.mdx

@@ -0,0 +1,88 @@
+import { themes, Image } from 'mdx-deck'
+import cookiesAlgoritm from '../../assets/cookies-algoritm.png'
+import memoryScheme from '../../assets/memory-scheme.png'
+
+export const theme = themes.book
+
+# CSS Media queries y pseudo selectores
+
+- Bautista Di Santo
+
+---
+
+## CSS - clase 2: Responsive design, pseudo selectores
+
+* position
+* Media-queries
+* pseudo clases
+* transform
+* transition
+
+---
+
+## width and height
+
+* le podemos dar una altura y ancho minimo a nuestro elementos en bloque, esto nos permite que no se vean deformados cuando la resolucion cambie. Tambien le podemos dar una altura y ancho maximo
+* si el contenido excede nuestro contenedor podemos usar la propiedad overflow para ocultar o crear un area de scroll. 
+
+---
+
+## position y z-index
+
+* static (default)
+* relative (nos permite usar: top, right, bottom y left y es relativa a su posicion inicial)
+* fixed (toma un lugar especifico en el viewport y nunca se mueve de ahi)
+* sticky (hace que nuestro elemento se quede pegado a )
+* a todos los elementos que tengan un valor de la propiedad position que sea diferente de static se les llaman positioned elements
+* a los elementos que sean posicionados se les puede aplicar la propiedad z-index, esto nos permite ubicar elementos en en diferentes capas y que tapen otros elementos
+
+---
+
+## como se suman el padding mas el width
+
+* cuando tenemos un elemento como un div con un width de 50px y un padding-right de 50px nuestro elemento terminaria con 100px de width, si tiene paddin right y 
+left nuestro elemento terminaria con 150px de width total, lo mismo con la altura
+
+---
+
+## Media-queries
+
+* las media queries nos permiten poner diferentes reglas de css para diferentes pantallas,
+ entonces cuando la resolucion de nuestra pantalla cambie (se agrande o achique) podesmos ir cambiando el layout de nuestra pagina, y las propiedades de los elementos
+
+---
+
+## Media-queries
+
+* la sintaxis para definir una media-querie es: 
+
+* @media only screen and (el ancho en el que nuestra web va a cambiar) { con nuestras reglas dentro }
+
+--- 
+
+## Media-queries
+
+* la sintaxis para definir una media-querie es: 
+
+* @media only screen and (max-width: 600px) { body: { color: black; }}
+
+---
+
+## combinadores
+
+* los combinadores nos dan nuevas formas de seleccionar elementos tags html y aplicarles estilos
+* child selectors: nos permiten acceder a los hijos de nuestros elementos html (div p{ propiedad: valor })
+* Adjacent Sibling Selector: podemos seleccionar todas las p que son hermanos prosimos de un div a elementos hermanos (div + p { propiedad: valor; })
+* General Sibling Selector: podemos seleccionar todas las etiquetas que 
+
+---
+
+## pseudo selectores
+
+* los pseudo selectores nos permiten crear cambios y traniciones en nuestros estilos cuando los atamos a ciertos eventos, como un :hover o :active 
+
+--- 
+
+ ## transitions
+
+ * las transiciones nos permiten transicionar de una manera mas suave de una propiedad a la otra

package.json

@@ -12,7 +12,9 @@
     "clase-3": "mdx-deck modulos/1-fundamentos-de-programación/3-modularizacion-y-funciones.mdx",
     "clase-4": "mdx-deck modulos/1-fundamentos-de-programación/4-estructuras-de-datos.mdx",
     "build": "mdx-deck build modulos/0-introducción/1-como-funciona-el-internet.mdx",
-    "build-pdf": "npx website-pdf http://localhost:8000/print -o modulos/1-fundamentos-de-programación/4-estructuras-de-datos.pdf"
+    "build-pdf": "npx website-pdf http://localhost:8000/print -o modulos/1-fundamentos-de-programación/4-estructuras-de-datos.pdf",
+    "clase-2-css": "mdx-deck modulos/2-diseño-web/2-css.mdx",
+    "clase-3-css": "mdx-deck modulos/2-diseño-web/3-css.mdx"
   },
   "dependencies": {
     "mdx-code": "2.0.0"