diff --git a/.DS_Store b/.DS_Store index 372c21a..6f17657 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/assets/push-pop.png b/assets/push-pop.png deleted file mode 100644 index e85a61d..0000000 Binary files a/assets/push-pop.png and /dev/null differ diff --git "a/modulos/1-fundamentos-de-programaci\303\263n/.DS_Store" "b/modulos/1-fundamentos-de-programaci\303\263n/.DS_Store" new file mode 100644 index 0000000..5008ddf Binary files /dev/null and "b/modulos/1-fundamentos-de-programaci\303\263n/.DS_Store" differ diff --git "a/modulos/1-fundamentos-de-programaci\303\263n/4-estructuras-de-datos.pdf" "b/modulos/1-fundamentos-de-programaci\303\263n/4-estructuras-de-datos.pdf" deleted file mode 100644 index 0fdf82a..0000000 Binary files "a/modulos/1-fundamentos-de-programaci\303\263n/4-estructuras-de-datos.pdf" and /dev/null differ diff --git "a/modulos/2-dise\303\261o-web/2-css.mdx" "b/modulos/2-dise\303\261o-web/2-css.mdx" new file mode 100644 index 0000000..08a1420 --- /dev/null +++ "b/modulos/2-dise\303\261o-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. + + + +* selector { propiedad: valor; } +* p { color: red; } +* /[[*]] esto es un comentario [[*]]/ + + + +--- + +## 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 +* Internos: +al final de nuestro documento html podemos hacer un apartado abriendo las etiquetas , dentro de estas escribimos nuestras reglas. +* Externos: podemos crear un archivo .css, e importarlo a nuestro html con la etiqueta + +--- + +## 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 + + + +* flex-end envia los objetos al final del contenedor +* flex-start los pone al principio +* flex-center los centra + + + +--- + +## 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 + diff --git "a/modulos/2-dise\303\261o-web/3-css.mdx" "b/modulos/2-dise\303\261o-web/3-css.mdx" new file mode 100644 index 0000000..334cbba --- /dev/null +++ "b/modulos/2-dise\303\261o-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 diff --git a/package.json b/package.json index b3f8f66..b1985ee 100644 --- a/package.json +++ b/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"