39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/02-css/ejercitaciones/00-estilos-basicos.md:
--------------------------------------------------------------------------------
1 | # 🎨 Ejercitación CSS: 3 Proyectos Prácticos
2 |
3 | ## 📌 Nivel 1: Tarjeta de Presentación
4 |
5 | ### 🎯 Objetivo
6 |
7 | Diseñar una tarjeta de presentación usando HTML y CSS para mejorar la apariencia visual.
8 |
9 | ### ✅ Requisitos
10 |
11 | 1. Crear un documento HTML con una tarjeta que incluya:
12 | - Nombre completo
13 | - Imagen de perfil
14 | - Descripción breve
15 | 2. Estilizar con CSS:
16 | - Tamaño fijo y bordes redondeados
17 | - Fondo con color suave
18 | - Sombras y espaciado interno
19 |
20 | ## 📌 Nivel 2: Página con Botón Animado
21 |
22 | ### 🎯 Objetivo
23 |
24 | Aplicar estilos avanzados a un botón con efectos de animación al pasar el mouse.
25 |
26 | ### ✅ Requisitos
27 |
28 | 1. Crear un HTML con un botón destacado
29 | 2. Aplicar CSS:
30 | - Color de fondo y tipografía personalizada
31 | - Efecto de transición al pasar el mouse
32 | - Cambios de color y tamaño en hover
33 |
34 | ## 📌 Nivel 3: Diseño de una Página de Inicio
35 |
36 | ### 🎯 Objetivo
37 |
38 | Crear una página de principal de un sitio web (con la temática que quieras)
39 |
40 | ### ✅ Requisitos
41 |
42 | 1. Estructurar un documento HTML con etiquetas semánticas
43 | 2. Aplicar estilos con CSS:
44 | - Tipografía elegante
45 | - Fondo con imagen o gradiente
46 | - Alineación y espaciado armonioso
47 |
48 | ## 🎯 Criterios de Evaluación
49 |
50 | ✔️ Correcta separación HTML y CSS
51 | ✔️ Uso adecuado de propiedades CSS
52 | ✔️ Diseño atractivo y responsivo
53 | ✔️ Uso de efectos y transiciones donde corresponda
54 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Programación 3
2 |
3 | ### Bienvenido al repo de `Programación 3`. Acá van a encontrar material resumido de lo visto en clase de desarrollo web.
4 |
5 | ## 📂 Estructura del Repositorio
6 |
7 | Este repo va a estar dividido en carpetas, cada una correspondiente a un tema específico:
8 |
9 | - **`http/`** - Fundamentos del protocolo HTTP.
10 | - **`html/`** - Conceptos clave sobre HTML y estructuras de documentos web.
11 | - **`css/`** - Estilos, diseño y responsive CSS.
12 | - **`javascript/`** - Programación con JavaScript, incluyendo ES6+, JS sincrónico y asincrónico, concepto de web component.
13 | - **`git/`** - Uso de Git y GitHub.
14 | - **`intro-react/`** - Introducción a React.
15 |
16 | ## 📌 Objetivo
17 |
18 | Este repo va a ser para que puedan consultar los temas dados en clase, repasar conceptos, rehacer actividades, etc. Recuerden que todos los temas dados en clase pueden profundizarse viendo las documentaciones oficiales de cada tecnología‼️.
19 |
20 | ## 🚀 Cómo Usar Este Repositorio
21 |
22 | 1. Clona el repositorio:
23 | ```bash
24 | git clone https://github.com/atarico/UTN-programacion3
25 | ```
26 | 2. Navega a la carpeta deseada, por ej:
27 | ```sh
28 | cd programacion3/javascript
29 | ```
30 | 3. Ahí encontrarás los archivos y documentación dada en clase.
31 |
32 | ## 🛠 Requisitos
33 |
34 | Se recomienda tener las siguientes herramientas en su PCs. Ya que son las herramientas con las que contamos en clase.
35 |
36 | - **Node.js y npm** para usar JS en el backend y manejar los paquetes necesarios.
37 | - **Git** para trabajar con el control de versiones.
38 | - **Visual Studio Code** como editor de código.
39 | - **React.js** para el desarrollo de interfaces interactivas.
40 |
41 |
42 |
43 | ## 📖 Recursos Adicionales
44 |
45 | #### Documentación oficial
46 |
47 | - [MDN Web Docs](https://developer.mozilla.org/) (Para http, html, css y JS)
48 | - [W3School](https://www.w3schools.com/) (Para todas las tecnologías web que aplicaremos)
49 | - [GitHub Docs](https://docs.github.com/)
50 | - [React.js Docs](https://react.dev/)
51 |
--------------------------------------------------------------------------------
/01-html/ejemploWeb/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Mi Primera Página Web
9 |
10 |
11 |
12 |
13 |
Bienvenidos a mi sitio web
14 |
21 |
22 |
23 |
24 |
25 |
Inicio
26 |
Esta es la página principal de mi sitio web.
27 |
Aquí podrás encontrar información interesante sobre HTML.
40 | CSS (Cascading Style Sheets) es un lenguaje de diseño utilizado para
41 | describir la presentación de un documento escrito en HTML o XML.
42 |
43 |
44 |
45 |
46 |
47 |
¿Para qué sirve CSS?
48 |
49 | CSS se utiliza para controlar el diseño y la apariencia de las
50 | páginas web, permitiendo separar el contenido de la presentación.
51 |
52 |
53 |
54 |
55 |
56 |
57 | ```
58 |
59 | ## 2. Formato en los que agregamos estilos
60 |
61 | ### 2.1 En línea
62 |
63 | ```html
64 |
Bienvenidos a CSS
65 | ```
66 |
67 | ### 2.2 Estilos internos
68 |
69 | ```html
70 |
71 |
72 |
73 | Intro a css
74 |
81 |
82 | ```
83 |
84 | ### 2.3 Estilos externos
85 |
86 | ```html
87 |
88 |
89 |
90 | Intro a css
91 |
92 |
93 |
94 | ```
95 |
96 | **Para vincular los archivos debemos colocar la ruta en la que se encuentra el archivo en la propiedad `href`**
97 |
98 | **‼️Es IMPORTANTE que declaremos las rutas como relativas utilizando `./` ya que cuando se suba a un servidor de no usar las rutas de marena relativa, esto podría ocacionar problemas**
99 |
100 | ## Archivo `styles.css`
101 |
102 | ### Reseteo de estilos generales
103 |
104 | ```css
105 | * {
106 | margin: 0;
107 | padding: 0;
108 | box-sizing: border-box;
109 | }
110 | ```
111 |
112 | ### Se agregan estilos al ``, `
` `
`
113 |
114 | ```css
115 | section {
116 | margin: 20px;
117 | border: 2px solid #f00;
118 | padding: 20px;
119 | background-color: #0e0e0e;
120 | border-radius: 50px;
121 | box-shadow: 4px 4px 10px rgba(255, 255, 255, 0.5);
122 | }
123 |
124 | h2 {
125 | color: #0f0;
126 | font-size: 2rem;
127 | text-align: center;
128 | margin-bottom: 20px;
129 | }
130 |
131 | p {
132 | color: rgb(255, 0, 212);
133 | font-size: 1.2rem;
134 | text-align: justify;
135 | line-height: 1.5;
136 | margin-bottom: 20px;
137 | }
138 | ```
139 |
--------------------------------------------------------------------------------
/06-vite/README.md:
--------------------------------------------------------------------------------
1 | # Vite
2 |
3 | ## ¿Qué es Vite?
4 |
5 | Vite es una herramienta moderna para el desarrollo de aplicaciones web. Su nombre significa "rápido" en francés, y su objetivo es ofrecer un entorno de desarrollo ultrarrápido y eficiente para proyectos de JavaScript, React, Vue, y otros frameworks modernos.
6 |
7 | Vite funciona como:
8 |
9 | - **Servidor de desarrollo**: Proporciona recarga instantánea y hot module replacement (HMR) para una experiencia de desarrollo fluida.
10 | - **Empaquetador (bundler)**: Usa [Rollup](https://rollupjs.org/) bajo el capó para empaquetar el código para producción.
11 | - **Minificador**: Optimiza y reduce el tamaño de los archivos finales usando herramientas modernas como [esbuild](https://esbuild.github.io/) o [terser](https://terser.org/).
12 | - **Compilador**: Transforma código moderno (ES6+, JSX, TypeScript, etc.) a JavaScript compatible con todos los navegadores.
13 |
14 | ## Creación de la build
15 |
16 | Cuando ejecutas `vite build`, Vite genera una versión optimizada y lista para producción de tu aplicación. Esto incluye:
17 |
18 | - Minificación de archivos JS, CSS y HTML.
19 | - Empaquetado de módulos en archivos finales eficientes.
20 | - Optimización de recursos estáticos (imágenes, fuentes, etc.).
21 | - Generación de archivos hash para cacheo eficiente.
22 |
23 | El resultado se guarda en la carpeta `dist/`.
24 |
25 | ## Estructura de archivos en un proyecto Vite (JavaScript/React)
26 |
27 | Al crear un proyecto con Vite y React (`npm create vite@latest` y eligiendo React), la estructura típica es:
28 |
29 | ```
30 | my-app/
31 | ├── node_modules/
32 | ├── public/
33 | │ └── vite.svg
34 | ├── src/
35 | │ ├── App.jsx
36 | │ ├── index.css
37 | │ ├── main.jsx
38 | │ └── assets/
39 | ├── .gitignore
40 | ├── index.html
41 | ├── package.json
42 | ├── README.md
43 | ├── vite.config.js
44 | └── ...
45 | ```
46 |
47 | ### Explicación de cada archivo/carpeta
48 |
49 | - **node_modules/**: Dependencias del proyecto.
50 | - **public/**: Archivos estáticos que se copian tal cual a la build final. Ideal para imágenes, favicon, etc.
51 | - `vite.svg`: Ejemplo de recurso estático.
52 | - **src/**: Código fuente de la aplicación.
53 | - `App.jsx`: Componente principal de React.
54 | - `main.jsx`: Punto de entrada de la app, donde se monta React en el DOM.
55 | - `index.css`: Estilos globales de la app.
56 | - `assets/`: Carpeta para imágenes, fuentes y otros recursos usados en el código fuente.
57 | - **.gitignore**: Archivos y carpetas que Git debe ignorar (por ejemplo, `node_modules/`, `dist/`).
58 | - **index.html**: Archivo HTML principal. Vite lo usa como plantilla y lo inyecta con los scripts y estilos generados.
59 | - **package.json**: Define las dependencias, scripts y metadatos del proyecto.
60 | - **README.md**: Documentación del proyecto.
61 | - **vite.config.js**: Archivo de configuración de Vite (plugins, rutas, alias, etc.).
62 | - **dist/** (se genera tras la build): Carpeta con la versión final y optimizada de la app lista para producción.
63 |
64 | ## Scripts útiles en Vite
65 |
66 | - `npm run dev`: Inicia el servidor de desarrollo con recarga instantánea.
67 | - `npm run build`: Genera la build optimizada para producción en `dist/`.
68 | - `npm run preview`: Sirve la build de producción localmente para probarla antes de desplegar.
69 |
70 | ## Ventajas de Vite
71 |
72 | - Arranque y recarga ultrarrápidos.
73 | - Soporte nativo para ES Modules.
74 | - Configuración mínima y fácil de extender.
75 | - Integración sencilla con React, Vue, Svelte, TypeScript, etc.
76 | - Plugins y ecosistema en crecimiento.
77 |
78 | ## Recursos recomendados
79 |
80 | - [Documentación oficial de Vite](https://vitejs.dev/)
81 | - [Guía de Vite + React](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)
82 |
--------------------------------------------------------------------------------
/02-css/ejercitaciones/03-grid.md:
--------------------------------------------------------------------------------
1 | # 🧩 Ejercitación CSS con Grid: 3 Proyectos Prácticos
2 |
3 | Este repo tiene tres ejercicios para practicar **CSS Grid**. Cada proyecto debe desarrollarse en un archivo HTML nuevo con su respectivo CSS, sin reutilizar documentos anteriores.
4 |
5 | ---
6 |
7 | ## 📌 Nivel 1: Layout de Revista
8 |
9 | ### 🎯 Objetivo
10 |
11 | Maquetar una portada de revista con varias secciones utilizando Grid.
12 |
13 | ### ✅ Requisitos
14 |
15 | 1. Crear un `grid` con 3 filas y 2 columnas
16 | 2. Incluir:
17 | - Título principal ocupando todo el ancho (grid-column: span 2)
18 | - Imagen destacada
19 | - Subtítulo y resumen
20 | - Dos bloques laterales (publicidad o info extra)
21 |
22 | ### 📝 Estructura base
23 |
24 | ```html
25 |
26 |
27 |
170 |
171 |
172 | ```
173 |
174 | ### 🎨 CSS sugerido (styles.css)
175 |
176 | ```css
177 | * {
178 | margin: 0;
179 | padding: 0;
180 | box-sizing: border-box;
181 | }
182 |
183 | body {
184 | padding: 20px;
185 | background-color: #333;
186 | font-family: system-ui, sans-serif;
187 | }
188 |
189 | .contenedor {
190 | }
191 |
192 | .menu,
193 | .contenido,
194 | .noticias {
195 | }
196 |
197 | .menu {
198 | }
199 |
200 | .contenido {
201 | }
202 |
203 | .noticias {
204 | }
205 | ```
206 |
207 | ---
208 |
209 | ## 🧪 Criterios de Evaluación
210 |
211 | ✔️ Aplicación correcta de Flexbox para distribución y alineación
212 | ✔️ Separación clara de contenido (HTML) y estilo (CSS)
213 | ✔️ Buenas prácticas: identación, nombres de clases, uso de etiquetas semánticas
214 |
215 | ---
216 |
--------------------------------------------------------------------------------
/00-http/README.md:
--------------------------------------------------------------------------------
1 | # Apuntes de Estudio sobre HTTP
2 |
3 | ## 1. Introducción a HTTP
4 |
5 | HTTP (HyperText Transfer Protocol) es el protocolo que permite la comunicación entre los navegadores y los servidores web. Es la base de la web, permitiendo la transferencia de páginas, imágenes, videos y cualquier otro **recurso**. Funciona bajo un modelo `cliente-servidor`, lo que significa que un cliente (como un navegador) envía una solicitud y un servidor responde con los datos correspondientes.
6 |
7 | HTTP es un protocolo sin estado, lo que significa que cada solicitud es independiente de las anteriores. Sin embargo, tecnologías como las **cookies**, las **sesiones** y los **tokens** permiten mantener cierta información entre múltiples solicitudes.
8 |
9 | ## 2. Versiones de HTTP
10 |
11 | - **HTTP/1.0 (1996)**: Primera versión estandarizada. Cada solicitud abre una nueva conexión con el servidor, lo que puede hacer que la comunicación sea más lenta.
12 | - **HTTP/1.1 (1997)**: Introduce conexiones persistentes, lo que permite reutilizar la misma conexión para múltiples solicitudes, mejorando el rendimiento.
13 | - **HTTP/2 (2015)**: Introduce la multiplexación, permitiendo que múltiples solicitudes se envíen al mismo tiempo en una única conexión. También mejora la compresión de los encabezados y la priorización de los recursos.
14 | - **HTTP/3 (En desarrollo)**: Basado en QUIC, un protocolo que reemplaza TCP por UDP para mejorar la velocidad y la seguridad.
15 |
16 | ## 3. Ciclo de una Petición HTTP
17 |
18 | El flujo de una petición HTTP sigue estos pasos:
19 |
20 | 1. El cliente (por ejemplo, un navegador o una aplicación) envía una
21 |
22 | **solicitud = `request`** HTTP al servidor.
23 |
24 | 2. El servidor recibe la solicitud, la procesa y genera una
25 |
26 | **respuesta = `response`.**
27 |
28 | 3. El servidor envía la respuesta HTTP al cliente.
29 | 4. El cliente interpreta la respuesta y la muestra al usuario (por ejemplo, renderizando una página web en el navegador).
30 |
31 | ## 4. Métodos HTTP
32 |
33 | Los métodos HTTP definen el tipo de acción que se desea realizar sobre un recurso.
34 |
35 | - **GET**: Trae los datos de un recurso.
36 | - **POST**: Envía datos al servidor para ser procesados y crear un recurso.
37 | - **PUT**: Actualiza completamente un recurso existente o lo crea si no existe.
38 | - **DELETE**: Elimina un recurso en el servidor.
39 | - **PATCH**: Modifica parcialmente un recurso existente.
40 |
41 | ## 5. Códigos de Estado HTTP
42 |
43 | Los códigos de estado informan sobre el resultado de una solicitud:
44 |
45 | ### 100 al 199 - Informativos
46 |
47 | - **100 Continue**: Indica que el servidor ha recibido los encabezados y espera el cuerpo de la solicitud.
48 | - **101 Switching Protocols**: El servidor acepta cambiar a un protocolo diferente.
49 |
50 | ### 200 al 299 - Éxito
51 |
52 | - **200 OK**: La solicitud fue exitosa y el servidor devuelve el recurso solicitado.
53 | - **201 Created**: Un recurso fue creado con éxito en el servidor.
54 | - **204 No Content**: La solicitud fue exitosa, pero no hay contenido en la respuesta.
55 |
56 | ### 300 al 399 - Redirecciones
57 |
58 | - **301 Moved Permanently**: El recurso ha sido movido a una nueva URL de forma permanente.
59 | - **302 Found**: El recurso ha sido movido temporalmente.
60 | - **304 Not Modified**: Indica que el recurso no ha cambiado desde la última vez que fue solicitado.
61 |
62 | ### 400 al 499 - Errores del Cliente
63 |
64 | - **400 Bad Request**: La solicitud es inválida o mal formada.
65 | - **401 Unauthorized**: Se requiere autenticación para acceder al recurso.
66 | - **403 Forbidden**: El acceso al recurso está prohibido.
67 | - **404 Not Found**: El recurso solicitado no existe en el servidor.
68 |
69 | ### 500 al 599 - Errores del Servidor
70 |
71 | - **500 Internal Server Error**: Ocurrió un error interno en el servidor.
72 | - **502 Bad Gateway**: El servidor actuando como proxy recibió una respuesta inválida de otro servidor.
73 | - **503 Service Unavailable**: El servidor no puede manejar la solicitud en ese momento, normalmente debido a mantenimiento o sobrecarga.
74 |
75 | ## 6. Encabezados HTTP
76 |
77 | Los encabezados HTTP proporcionan información adicional en las solicitudes y respuestas. Se dividen en:
78 |
79 | ### Encabezados de solicitud
80 |
81 | Informan al servidor sobre la solicitud del cliente.
82 |
83 | - `User-Agent`: Indica el navegador o cliente que hace la solicitud.
84 | - `Accept`: Especifica los formatos de respuesta que el cliente puede manejar.
85 | - `Authorization`: Proporciona credenciales para autenticación.
86 | - `Content-Type`: Indica el tipo de contenido enviado (ej. `application/json`).
87 |
88 | ### Encabezados de respuesta
89 |
90 | Proporcionan información sobre la respuesta del servidor.
91 |
92 | - `Server`: Indica el software del servidor.
93 | - `Content-Length`: Longitud del contenido en la respuesta.
94 | - `Set-Cookie`: Envia cookies al cliente.
95 |
96 | ### Encabezados de control de caché
97 |
98 | Administran cómo se almacenan en caché los recursos.
99 |
100 | - `Cache-Control`: Controla cómo el contenido debe ser almacenado en caché.
101 | - `Expires`: Fecha de expiración del contenido en caché.
102 | - `ETag`: Identificador único de una versión de un recurso.
103 |
104 | ## 7. Seguridad en HTTP
105 |
106 | - **HTTPS (HTTP Secure)**: Utiliza TLS/SSL para cifrar la comunicación entre cliente y servidor, protegiendo la información de ataques de interceptación.
107 | - **CORS (Cross-Origin Resource Sharing)**: Permite controlar qué dominios pueden acceder a los recursos de un servidor.
108 | - **CSRF (Cross-Site Request Forgery)**: Ataque en el que se engaña a un usuario autenticado para que realice acciones no deseadas; se mitiga con tokens de autenticación.
109 | - **XSS (Cross-Site Scripting)**: Ataque en el que se inyecta código malicioso en una página web; se previene con encabezados como `Content-Security-Policy`.
110 |
111 | ## 8. HTTP vs. WebSockets
112 |
113 | - **HTTP**: Basado en un modelo de solicitud-respuesta donde cada petición es independiente.
114 | - **WebSockets**: Permite una comunicación bidireccional y persistente entre cliente y servidor, ideal para aplicaciones en tiempo real como chats o juegos online.
115 |
116 | ## 9. Herramientas para Analizar HTTP
117 |
118 | - **Postman**: Permite realizar pruebas de API con solicitudes HTTP personalizadas.
119 | - **cURL**: Herramienta de línea de comandos para hacer solicitudes HTTP.
120 | - **DevTools de los Navegadores**: Ofrecen herramientas para inspeccionar y analizar solicitudes y respuestas HTTP en tiempo real.
121 |
122 | ## 10. Conclusión
123 |
124 | HTTP es el pilar de la web moderna. Comprender cómo funciona, sus métodos, códigos de estado y medidas de seguridad es fundamental para desarrollar aplicaciones eficientes y seguras. Con cada nueva versión del protocolo, se mejora la velocidad, seguridad y eficiencia de la comunicación en la web.
125 |
126 | ## 📚 11. Documentación oficial
127 |
128 | - [MDN Web Docs](https://developer.mozilla.org/es/docs/Web/HTTP)
129 |
--------------------------------------------------------------------------------
/03-comando-git/README.md:
--------------------------------------------------------------------------------
1 | # Git
2 |
3 | **Git es el sistema de control de versiones distribuido open sourse que facilita las actividades colaborativas en el desarrollo de software. Acá hay un resume de los comandos usados en clase.**
4 |
5 | **IMPORTANTE**: Si no tienen instalado **_GIT_** en su computadora, deben hacerlo antes de continuar. En el siguiente link pueden descargarlo: [Descargar GIT](https://git-scm.com)
6 |
7 | ‼️ **Recuerden que para ejecutar los comandos en terminal deben estar bien posicionados en la carpeta en la que van a trabajar.**
8 |
9 | ‼️**En la pantalla de instalación deberán seleccionar la 2da opción que dice: "Override the default branch name for new repositories" como se ve en la imagen, después de eso se puede dar todo -NEXT- hasta la opción -INSTALL-**
10 |
11 |
12 |
13 |
14 |
15 | ## Comandos básicos
16 |
17 | ### 1. Configuración de credenciales.
18 |
19 | Les recomendamos que usen el mismo nombre de usuario que tienen en github
20 |
21 | ```bash
22 | git config --global user.name "userName"
23 | ```
24 |
25 | Para chequear si el nombre de usuario se ha agregado usamos el comando
26 |
27 | ```bash
28 | git config user.name
29 | ```
30 |
31 | La terminal nos deberá devolver el nombre de usuario que hayamos puesto entre comillas.
32 |
33 | ```bash
34 | |> userName
35 | ```
36 |
37 | Ahora hacemos los mismos pasos para agregar un email.
38 |
39 | ```bash
40 | git config --global user.email "user@mail.com"
41 | ```
42 |
43 | Para chequear si el email se ha agregado correctamente, usamos el comando
44 |
45 | ```bash
46 | git config user.email
47 | ```
48 |
49 | La terminal nos deberá devolver el email que hayamos puesto entre comillas.
50 |
51 | ```bash
52 | |> user@mail.com
53 | ```
54 |
55 | ### 2. Creación de un repositorio
56 |
57 | Lo primero que debemos hacer es movernos a la carpeta que sea la de nuestro proyecto. Es importante entender que para ejecutar los comandos en terminal debemos estar bien posicionados en la carpeta en la que vamos a trabajar.
58 |
59 | Si el directorio proyecto tiene la siguiente ruta:
60 |
61 | ```
62 | 📁user
63 | |
64 | |___ 📁dev
65 | |
66 | |___ 📁programacion3
67 | |
68 | |___ 📁proyecto
69 | ```
70 |
71 | **‼️Debemos posicionarnos en esa carpeta antes de ejecutar cualquier comando**
72 |
73 | ```bash
74 | cd dev/programacion3/proyecto
75 | ```
76 |
77 | Una vez dentro del proyecto, debemos realizar los siguientes pasos:
78 |
79 | #### 1. Inicializa un repositorio
80 |
81 | ```bash
82 | git init
83 | ```
84 |
85 | #### 2. Ahora ejecutaremos el comando **MAS IMPORTANTE**
86 |
87 | ```bash
88 | git status
89 | ```
90 |
91 | Este comando nos mostrará por pantalla toda la información del estado del repositorio en un instante de tiempo determinado. Veríamos algo así:
92 |
93 | ```bash
94 | On branch main
95 |
96 | No commits yet
97 |
98 | Untracked files:
99 | (use "git add ..." to include in what will be committed)
100 | index.html <--- (*)
101 |
102 | nothing added to commit but untracked files present (use "git add" to track)
103 | ```
104 |
105 | (\*) Acá apareceran, en rojo, el o los archivos que tengamos en el área de trabajo (WORKING AREA). No significan que estén mal o con un error, solamente indica que no están siendo seguidos por git. En este caso, el archivo index.html no está siendo seguido por git. Esto significa que no se guardará en el repositorio hasta que lo agreguemos.
106 |
107 | #### 3. Agregar un archivo al área de preparación (STAGING AREA)
108 |
109 | ```bash
110 | git add index.html
111 | ```
112 |
113 | o si queremos agregar todos los archivos:
114 |
115 | ```bash
116 | git add .
117 | ```
118 |
119 | una vez ejecutado este comando, veremos que se agrega en la terminal una linea que dice algo así:
120 |
121 | ```bash
122 | Changes to be committed:
123 | (use "git rm --cached ..." to unstage)
124 | new file: index.html
125 | ```
126 |
127 | Esto significa que el archivo index.html ya está siendo seguido por git. Ahora, veremos que ya no aparece en rojo, sino en verde.
128 |
129 | #### 4. Hacer un commit
130 |
131 | ```bash
132 | git commit -m "Agregando index.html"
133 | ```
134 |
135 | Esto significa que hemos guardado el archivo en el repositorio. El mensaje que le agregamos entre comillas es una descripción del commit. Es importante agregarle un mensaje que describa lo que hicimos, ya que luego podremos ver el historial de commits y nos ayudará a entender qué hicimos en cada uno.
136 |
137 | #### Subir archivos a un repo en github
138 |
139 | Una vez que hayamos creado el repo en github y tengamos inicializado el repositorio en local (en nuestra computadora). Debemos vincularlos, para eso ejecutamos el siguiente comando:
140 |
141 | ```bash
142 | git remote add origin
143 | ```
144 |
145 | Esto vincula el repositorio local con el remoto. Ahora, para subir los cambios al repo remoto, ejecutamos:
146 |
147 | ```bash
148 | git push -u origin main
149 | ```
150 |
151 | Esto sube los cambios al repo remoto. La primera vez que lo hacemos, debemos usar el flag -u para que se vincule la rama local con la remota. Luego, ya no será necesario.
152 |
153 | #### 5. Consultar el historial de cambios
154 |
155 | ```bash
156 | git log
157 | ```
158 |
159 | Este comando nos muestra todos los commits hechos hasta el momento. Podemos ver el autor, la fecha y el mensaje del commit.
160 |
161 | #### 6. Deshacer acciones
162 |
163 | Si agregamos un archivo al staging por error y queremos sacarlo:
164 |
165 | ```bash
166 | git reset index.html
167 | ```
168 |
169 | Si queremos volver a un commit anterior pero mantener los cambios:
170 |
171 | ```bash
172 | git reset
173 | ```
174 |
175 | Si queremos volver a un commit anterior y descartar todo:
176 |
177 | ```bash
178 | git reset --hard
179 | ```
180 |
181 | #### 7. Clonar un repositorio existente
182 |
183 | ```bash
184 | git clone
185 | ```
186 |
187 | Esto crea una copia local de un repositorio remoto.
188 |
189 | #### 8. Sincronizar cambios
190 |
191 | Para traer los cambios desde el remoto sin hacer merge automático:
192 |
193 | ```bash
194 | git fetch
195 | ```
196 |
197 | Para traer y fusionar los cambios del remoto:
198 |
199 | ```bash
200 | git pull
201 | ```
202 |
203 | Esto trae los cambios del remoto y los fusiona con la rama actual. Si hay conflictos, deberemos resolverlos manualmente.
204 |
205 | ## Ramas
206 |
207 | Crear y moverse a la nueva rama directamente:
208 |
209 | ```bash
210 | git checkout -b nombre-rama
211 | ```
212 |
213 | Crear una rama nueva:
214 |
215 | ```bash
216 | git branch nombre-rama
217 | ```
218 |
219 | Cambiarse de rama:
220 |
221 | ```bash
222 | git checkout nombre-rama
223 | ```
224 |
225 | También podemos usar el siguiente comando para cambiarnos de rama:
226 |
227 | ```bash
228 | git switch nombre-rama
229 | ```
230 |
231 | Unir ramas:
232 |
233 | ```bash
234 | git merge nombre-rama
235 | ```
236 |
237 | Eliminar una rama:
238 |
239 | ```bash
240 | git branch -d nombre-rama
241 | ```
242 |
243 | ## Otras herramientas útiles
244 |
245 | Ignorar archivos (crear archivo `.gitignore` con patrones como por ejemplo):
246 |
247 | ```
248 | *.log
249 | node_modules/
250 | dist/
251 | ```
252 |
253 | ## Guardar cambios temporales (stash)
254 |
255 | Guardar cambios sin commitear:
256 |
257 | ```bash
258 | git stash
259 | ```
260 |
261 | Listar los stashes guardados:
262 |
263 | ```bash
264 | git stash list
265 | ```
266 |
267 | Aplicar el último stash guardado:
268 |
269 | ```bash
270 | git stash pop
271 | ```
272 |
273 | Eliminar el stash:
274 |
275 | ```bash
276 | git stash drop
277 | ```
278 |
279 | ---
280 |
281 | ### 📚 En el siguiente enlace encontrarán un cheat sheet extraido desde github.
282 |
283 | **👉[Comandos de git](https://training.github.com/downloads/es_ES/github-git-cheat-sheet.pdf)👈**
284 |
--------------------------------------------------------------------------------
/01-html/README.md:
--------------------------------------------------------------------------------
1 | # Apuntes HTML
2 |
3 | ## 1. Definición
4 |
5 | HTML (HyperText Markup Language) es el lenguaje utilizado para estructurar el contenido de una web. Se compone de etiquetas que definen los elementos dentro de una página web.
6 |
7 | ## 2. Estructura Básica de un Documento HTML
8 |
9 | ```html
10 |
11 |
12 |
13 |
14 |
15 | Título de la Página
16 |
17 |
18 |
Encabezado Principal
19 |
Este es un párrafo de ejemplo.
20 |
21 |
22 | ```
23 |
24 | ### Explicación:
25 |
26 | - ``: Define la versión de HTML.
27 | - ``: Contenedor principal del documento.
28 | - ``: Contiene metadatos, enlaces a CSS y scripts.
29 | - ``: Definen la información que reciben los navegadores y los motores de busqueda (como la codificación de caracteres).
30 | - ``: Define el título de la página.
31 | - `<body>`: Contiene el contenido visible de la página.
32 |
33 | ## 3. Elementos Comunes en HTML
34 |
35 | ### 3.1 Encabezados
36 |
37 | ```html
38 | <h1>Encabezado 1</h1>
39 | <h2>Encabezado 2</h2>
40 | <h3>Encabezado 3</h3>
41 | <h4>Encabezado 4</h4>
42 | <h5>Encabezado 5</h5>
43 | <h6>Encabezado 6</h6>
44 | ```
45 |
46 | ### 3.2 Párrafos y Texto
47 |
48 | ```html
49 | <p>Esto es un párrafo.</p>
50 | <strong>Texto en negrita</strong>
51 | <em>Texto en cursiva</em>
52 | ```
53 |
54 | ### 3.3 Listas
55 |
56 | **Lista ordenada:**
57 |
58 | ```html
59 | <ol>
60 | <li>Elemento 1</li>
61 | <li>Elemento 2</li>
62 | </ol>
63 | ```
64 |
65 | **Lista desordenada:**
66 |
67 | ```html
68 | <ul>
69 | <li>Elemento A</li>
70 | <li>Elemento B</li>
71 | </ul>
72 | ```
73 |
74 | ### 3.4 Enlaces
75 |
76 | ```html
77 | <a href="./pages/pagina2.html">Pagina 2</a>
78 | <a href="https://www.google.com" target="_blank">Visitar Ejemplo</a>
79 | ```
80 |
81 | El atributo `target` se utiliza cuando queremos abrir un enlace externo a nuestra web en una nueva pestaña. Si vamos a navegar en nuestra web, no es necesario definir el atributo target.
82 |
83 | ### 3.5 Imágenes
84 |
85 | ```html
86 | <img
87 | src="./imgs/imagen.jpg"
88 | alt="Descripción de la imagen"
89 | title="Titulo de la imagen"
90 | />
91 | ```
92 |
93 | El atributo `alt` es muy importante. Da accesibilidad y tiene que tener una descripción de la imagen.
94 |
95 | El atributo `title` le da un titulo a la imagen y será visible cuando se pase el mouse por encima de la imagen.
96 |
97 | ## 4. Tablas
98 |
99 | ```html
100 | <table>
101 | <tr>
102 | <th>Nombre</th>
103 | <th>Edad</th>
104 | </tr>
105 | <tr>
106 | <td>Juan</td>
107 | <td>25</td>
108 | </tr>
109 | </table>
110 | ```
111 |
112 | ## 5. Formularios
113 |
114 | ```html
115 | <form action="/submit" method="POST">
116 | <label for="nombre">Nombre:</label>
117 | <input type="text" id="nombre" name="nombre" />
118 | <button type="submit">Enviar</button>
119 | </form>
120 | ```
121 |
122 | `action="/submit":` Especifica la URL a la que se enviarán los datos del formulario cuando se envíe
123 |
124 | `method="POST":` Indica el método HTTP utilizado para enviar los datos
125 |
126 | `for="nombre":` Asocia la etiqueta con el input que tiene el mismo ID.
127 | Propósito: Mejora la accesibilidad y permite hacer click en la etiqueta para seleccionar el campo
128 |
129 | `type="text":` Define la entrada como un campo de texto.
130 |
131 | `id="nombre":` Proporciona un identificador único para el elemento
132 |
133 | `name="nombre":` Especifica el nombre del campo para cuando se envían los datos del formulario
134 |
135 | `type="submit":` Define el botón como un botón de envío de formulario
136 | Cuando se hace click
137 |
138 | El atributo name es crucial para el procesamiento del lado del servidor
139 | El atributo id es importante para la manipulación de JavaScript y la asociación de etiquetas
140 | Los atributos type ayudan a definir el comportamiento de los elementos del formulario
141 | Usar una <label> mejora la usabilidad y accesibilidad del formulario, especialmente para lectores de pantalla
142 |
143 | ## 6. Etiquetas Semánticas
144 |
145 | HTML5 introduce etiquetas semánticas para mejorar la estructura:
146 |
147 | - `<header>`: Encabezado de la página.
148 | - `<nav>`: Menú de navegación.
149 | - `<main>`: Contenido principal.
150 | - `<section>`: Secciones del contenido.
151 | - `<article>`: Contenido independiente.
152 | - `<aside>`: Contenido relacionado (barra lateral).
153 | - `<footer>`: Pie de página.
154 |
155 | ## 7. Buenas Prácticas
156 |
157 | - Usar etiquetas semánticas adecuadas.
158 | - Mantener una estructura organizada.
159 | - Utilizar atributos `alt` en imágenes para accesibilidad.
160 |
161 | ## 8. Contenedor general
162 |
163 | La etiqueta `<div>` es un contenedor genérico que se utiliza para agrupar otros elementos HTML.
164 |
165 | ```html
166 | <div class="contenedor">
167 | <h1>Encabezado dentro de un div</h1>
168 | <p>Texto dentro de un div.</p>
169 | </div>
170 | ```
171 |
172 | ### ‼️La etiqueta `div` no consta de semántica, por lo que es recomendable utilizarla lo menos posible. No está mal ni penalizado su uso, pero si podemos remplazarla por una etiqueta semantica, debemos hacerlo.
173 |
174 | # Otras etiquetas de HTML5
175 |
176 | ## 1. `<fieldset>` (Campo de formulario)
177 |
178 | Agrupa elementos dentro de un formulario, mejorando la accesibilidad y organización visual.
179 |
180 | ```html
181 | <fieldset>
182 | <legend>Datos Personales</legend>
183 | <label for="nombre">Nombre:</label>
184 | <input type="text" id="nombre" />
185 | </fieldset>
186 | ```
187 |
188 | ## 2. `<legend>` (Leyenda del formulario)
189 |
190 | Proporciona una descripción o título para un grupo de campos en un formulario.
191 |
192 | ```html
193 | <fieldset>
194 | <legend>Datos de Contacto</legend>
195 | <label for="email">Correo Electrónico:</label>
196 | <input type="email" id="email" />
197 | </fieldset>
198 | ```
199 |
200 | ## 3. `<mark>` (Texto resaltado)
201 |
202 | Resalta texto para indicar relevancia en el contexto.
203 |
204 | ```html
205 | <p>La palabra <mark>HTML</mark> es fundamental para el desarrollo web.</p>
206 | ```
207 |
208 | ## 4. `<strong>` (Texto en negrita con énfasis)
209 |
210 | Indica importancia especial con valor semántico.
211 |
212 | ```html
213 | <p>
214 | Es <strong>importante</strong> revisar todos los detalles antes de enviar.
215 | </p>
216 | ```
217 |
218 | ## 5. `<b>` (Texto en negrita, sin énfasis semántico)
219 |
220 | Cambia la apariencia a negrita sin importancia semántica.
221 |
222 | ```html
223 | <p>Este texto es <b>negrita</b>, pero no aporta propiedades semánticas.</p>
224 | ```
225 |
226 | ## 6. `<i>` (Texto en cursiva, sin énfasis semántico)
227 |
228 | Cambia la apariencia a cursiva sin significado semántico.
229 |
230 | ```html
231 | <p>El término <i>función</i> se usa en programación.</p>
232 | ```
233 |
234 | ## 7. `<em>` (Texto enfatizado)
235 |
236 | Indica énfasis con valor semántico, generalmente en cursiva.
237 |
238 | ```html
239 | <p>Este es un <em>ejemplo</em> de énfasis textual.</p>
240 | ```
241 |
242 | ## 8. `<dialog>` (Ventana de diálogo)
243 |
244 | Representa un cuadro de diálogo interactivo en HTML5.
245 |
246 | ```html
247 | <dialog id="miDialogo" closedby="any">
248 | <h2>Holi</h2>
249 | <p>Este es un cuadro de diálogo.</p>
250 |
251 | <form method="dialog">
252 | <button>Cerrar</button>
253 | </form>
254 | </dialog>
255 | ```
256 |
257 | ## 10. `<details>` (Detalles expandibles)
258 |
259 | Crea contenido que el usuario puede expandir o contraer.
260 |
261 | ```html
262 | <details>
263 | <summary>Haga clic para más detalles</summary>
264 | <p>Este es el contenido que se oculta hasta que el usuario lo expanda.</p>
265 | </details>
266 | ```
267 |
268 | ## 11. `<summary>` (Resumen de contenido)
269 |
270 | Define el encabezado de un contenido colapsable.
271 |
272 | ```html
273 | <details>
274 | <summary>Resumen</summary>
275 | <p>Contenido expandible cuando se hace clic en el resumen.</p>
276 | </details>
277 | ```
278 |
279 | ## 12. `<wbr>` (Saltos de línea opcionales)
280 |
281 | Sugiere una posible ubicación para un salto de línea en palabras largas.
282 |
283 | ```html
284 | <p>Este es un texto largo que puede <wbr />romperse aquí si es necesario.</p>
285 | ```
286 |
287 | ## 13. `<time>` (Representación de tiempo)
288 |
289 | Representa fechas, horas o intervalos de tiempo.
290 |
291 | ```html
292 | <time datetime="2025-03-25">25 de marzo de 2025</time>
293 | ```
294 |
295 | ## 14. `<progress>` (Indicador de progreso)
296 |
297 | Representa el progreso de una tarea.
298 |
299 | ```html
300 | <progress value="30" max="100">30%</progress>
301 | ```
302 |
303 | ## 15. `<meter>` (Medición de valores dentro de un rango)
304 |
305 | Representa un valor dentro de un rango conocido.
306 |
307 | ```html
308 | <meter value="0.6" min="0" max="1">60%</meter>
309 | ```
310 |
311 | ### Nota: Puede que alguna de estas etiquetas no estén disponibles en todos los navegadores. Para buscar si las etiquetas están disponibles en todos los navegadores, podés usar la web 👉[caniuse](https://caniuse.com/)👈. Solo se debe colocar el nombre de la etiqueta o del atributo y ver el porcentaje de navegadores que acepten esos elementos. Mientras sea mas de 98% estará bien utilizarlo.
312 |
313 | ### 📚 Enlaces a documentación oficial
314 |
315 | [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML)
316 |
--------------------------------------------------------------------------------
/05-react-intro/README.md:
--------------------------------------------------------------------------------
1 | # Apuntes básicos de React
2 |
3 | ## ¿Qué es React?
4 |
5 | React es una biblioteca de JavaScript desarrollada por Facebook para construir interfaces de usuario (UI) de manera eficiente y declarativa. Permite crear aplicaciones web interactivas y escalables, facilitando la construcción de componentes reutilizables.
6 |
7 | - **¿Para qué se utiliza?** Para desarrollar interfaces de usuario dinámicas, especialmente en aplicaciones de una sola página (SPA).
8 | - **Objetivo:** Facilitar la creación y gestión de interfaces complejas, optimizando el rendimiento y la experiencia del usuario.
9 |
10 | ## Babel
11 |
12 | **Babel** es un compilador que transforma el código JSX (y otras características modernas de JavaScript) en código JavaScript compatible con todos los navegadores. Gracias a Babel, podemos escribir código moderno y JSX sin preocuparnos por la compatibilidad.
13 |
14 | ### Alternativa moderna: SWC
15 |
16 | **SWC** (Speedy Web Compiler) es un compilador/transpilador escrito en Rust, mucho más rápido que Babel, y compatible con la mayoría de los proyectos modernos de React. SWC también transforma JSX y código moderno de JavaScript, y es la opción que se va a utilizar en este curso/proyecto.
17 |
18 | ## Root
19 |
20 | El **root** es el punto de entrada de la aplicación React en el DOM. Se suele crear un elemento `<div id="root">` en el HTML y React renderiza la app dentro de ese nodo usando el método `ReactDOM.createRoot` o `ReactDOM.render`.
21 |
22 | ```html
23 | <!-- index.html -->
24 | <body>
25 | <div id="root"></div>
26 | </body>
27 | ```
28 |
29 | ```js
30 | // index.js
31 | import React from "react";
32 | import { createRoot } from "react-dom/client";
33 | import App from "./App";
34 |
35 | const root = createRoot(document.getElementById("root"));
36 | root.render(<App />);
37 | ```
38 |
39 | ## Hidratación
40 |
41 | La **hidratación** es el proceso por el cual React "toma el control" de un HTML generado previamente (por ejemplo, en aplicaciones renderizadas en el servidor) y lo convierte en una aplicación interactiva en el navegador. Es fundamental en aplicaciones que usan renderizado del lado del servidor (SSR).
42 |
43 | ## JSX
44 |
45 | JSX (JavaScript XML) es una extensión de sintaxis para JavaScript que permite escribir código similar a HTML dentro de archivos JavaScript. **No es HTML**, aunque se parece mucho. JSX se transforma a llamadas de JavaScript que crean elementos de React.
46 |
47 | ### Ejemplo básico de JSX
48 |
49 | ```jsx
50 | const elemento = <h1>Hola, mundo!</h1>;
51 | ```
52 |
53 | Esto NO es HTML, es una sintaxis especial que Babel transforma en:
54 |
55 | ```js
56 | const elemento = React.createElement("h1", null, "Hola, mundo!");
57 | ```
58 |
59 | ### Diferencias clave con HTML
60 |
61 | - En JSX, los atributos se escriben en camelCase: `className` en vez de `class`, `htmlFor` en vez de `for`.
62 | - Todo debe estar contenido en un solo elemento padre.
63 | - Puedes insertar expresiones de JavaScript usando llaves `{}`:
64 |
65 | ```jsx
66 | const nombre = "Ana";
67 | const saludo = <h2>Hola, {nombre}!</h2>;
68 | ```
69 |
70 | - Los comentarios en JSX se escriben así: `{/* Esto es un comentario en JSX */}`
71 |
72 | ## Componentes
73 |
74 | Un **componente** es una función (o clase) que retorna JSX. Los componentes permiten dividir la UI en piezas reutilizables y aisladas.
75 |
76 | ### Ejemplo de componente funcional
77 |
78 | ```jsx
79 | function Saludo(props) {
80 | return <h1>Hola, {props.nombre}!</h1>;
81 | }
82 | ```
83 |
84 | Los componentes deben empezar con mayúscula.
85 |
86 | ## Props
87 |
88 | Las **props** (propiedades) son los datos que se pasan a los componentes desde su "padre". Son de solo lectura.
89 |
90 | ```jsx
91 | <Saludo nombre="Juan" />
92 | ```
93 |
94 | ### Props especiales: key y children
95 |
96 | - **key:** Es una prop especial que ayuda a React a identificar elementos únicos en listas. Es obligatoria cuando se renderizan listas de componentes.
97 |
98 | ```jsx
99 | <ul>
100 | {usuarios.map((usuario) => (
101 | <li key={usuario.id}>{usuario.nombre}</li>
102 | ))}
103 | </ul>
104 | ```
105 |
106 | - **children:** Es una prop especial que representa el contenido "hijo" que se coloca entre las etiquetas de apertura y cierre de un componente.
107 |
108 | ```jsx
109 | function Contenedor(props) {
110 | return <div>{props.children}</div>;
111 | }
112 |
113 | <Contenedor>
114 | <p>Este es un hijo</p>
115 | </Contenedor>;
116 | ```
117 |
118 | ## Hooks
119 |
120 | Un **hook** es una función especial de React que permite usar características como el estado y el ciclo de vida en componentes funcionales. Los hooks permiten escribir componentes funcionales con capacidades que antes solo tenían las clases.
121 |
122 | ### Reglas de los hooks
123 |
124 | - Los hooks **siempre** deben empezar con la palabra `use` (por ejemplo, `useState`, `useEffect`).
125 | - **Solo** se pueden llamar en el nivel superior de un componente funcional o en un custom hook (no dentro de condicionales, bucles ni funciones anidadas).
126 | - **No** se pueden usar en clases, ni fuera de componentes de React.
127 | - El orden de los hooks debe ser siempre el mismo en cada renderizado.
128 |
129 | > **Ejemplo incorrecto:**
130 | >
131 | > ```jsx
132 | > if (condicion) {
133 | > const [valor, setValor] = useState(0); // ❌ No hacer esto
134 | > }
135 | > ```
136 |
137 | > **Ejemplo correcto:**
138 | >
139 | > ```jsx
140 | > const [valor, setValor] = useState(0); // ✅ Siempre en la raíz del componente
141 | > if (condicion) {
142 | > // ...
143 | > }
144 | > ```
145 |
146 | ## useState
147 |
148 | `useState` es el hook más básico y utilizado. Permite agregar estado a un componente funcional.
149 |
150 | ### ¿Cómo funciona?
151 |
152 | - Se importa desde React: `import { useState } from "react";`
153 | - Recibe un **valor inicial** (puede ser cualquier tipo de dato).
154 | - Devuelve un array con dos elementos: el **estado actual** y una **función para actualizarlo**.
155 | - Al actualizar el estado, **provoca un re-renderizado** del componente.
156 | - La actualización del estado es **asincrónica**: el valor no cambia inmediatamente después de llamar a la función de actualización.
157 |
158 | ### Ejemplo básico
159 |
160 | ```jsx
161 | import { useState } from "react";
162 |
163 | function Contador() {
164 | const [contador, setContador] = useState(0); // valor inicial: 0
165 |
166 | const incrementar = () => {
167 | setContador(contador + 1);
168 | // console.log(contador); // ¡Ojo! Aquí aún no se actualizó el valor
169 | };
170 |
171 | return (
172 | <div>
173 | <p>Valor: {contador}</p>
174 | <button onClick={incrementar}>Sumar</button>
175 | </div>
176 | );
177 | }
178 | ```
179 |
180 | ### Detalles importantes
181 |
182 | - El valor inicial solo se usa la **primera vez** que se monta el componente.
183 | - Si necesitas calcular el valor inicial, puedes pasar una función: `useState(() => valorCalculado)`.
184 | - La función de actualización puede recibir una función para obtener el valor más reciente:
185 |
186 | ```jsx
187 | setContador((prev) => prev + 1);
188 | ```
189 |
190 | - Cambiar el estado provoca un **re-render** del componente y de sus hijos.
191 | - El estado es **privado** para cada instancia del componente.
192 | - No modifiques el estado directamente, siempre usa la función de actualización.
193 |
194 | ### Ejemplo avanzado: valor inicial por función
195 |
196 | ```jsx
197 | const [fecha] = useState(() => new Date().toLocaleDateString());
198 | ```
199 |
200 | ### Advertencias
201 |
202 | - No confíes en el valor actualizado inmediatamente después de llamar a la función de actualización.
203 | - No uses hooks dentro de condicionales, bucles ni funciones anidadas.
204 | - Cada llamada a `useState` es independiente y mantiene su propio estado.
205 |
206 | ## Estados e Inputs controlados
207 |
208 | El **estado** es la información que puede cambiar a lo largo del tiempo en un componente. Los **inputs controlados** son elementos de formulario cuyo valor es gestionado por el estado de React.
209 |
210 | ### Ejemplo de input controlado
211 |
212 | ```jsx
213 | function Formulario() {
214 | const [nombre, setNombre] = useState("");
215 | return <input value={nombre} onChange={(e) => setNombre(e.target.value)} />;
216 | }
217 | ```
218 |
219 | ### ¿Qué elementos se pueden controlar?
220 |
221 | - `<input>`, `<textarea>`, `<select>`, etc. Todos pueden ser controlados mediante el estado de React.
222 |
223 | ## Elevación del estado (Lifting State Up)
224 |
225 | Cuando varios componentes necesitan compartir o modificar el mismo estado, se recomienda "elevar" ese estado al ancestro común más cercano y pasar funciones y valores por props.
226 |
227 | > **Advertencia:** No es buena práctica pasar directamente la función `setState` (por ejemplo, `setValor`) como prop a los hijos. Es preferible pasar una función personalizada que encapsule la lógica de actualización, para mantener el control y evitar dependencias innecesarias entre componentes.
228 |
229 | ### Ejemplo básico
230 |
231 | ```jsx
232 | function Padre() {
233 | const [valor, setValor] = useState("");
234 |
235 | // Función personalizada para actualizar el estado
236 | const actualizarValor = (nuevoValor) => setValor(nuevoValor);
237 |
238 | return (
239 | <>
240 | <Hijo valor={valor} onActualizar={actualizarValor} />
241 | <OtroHijo valor={valor} />
242 | </>
243 | );
244 | }
245 |
246 | function Hijo({ valor, onActualizar }) {
247 | return <input value={valor} onChange={(e) => onActualizar(e.target.value)} />;
248 | }
249 |
250 | function OtroHijo({ valor }) {
251 | return <p>El valor es: {valor}</p>;
252 | }
253 | ```
254 |
255 | De esta forma, el componente padre mantiene el control sobre cómo se actualiza el estado y los hijos solo notifican los cambios a través de funciones específicas.
256 |
257 | ## Recursos recomendados
258 |
259 | - [Documentación oficial de React (en español)](https://es.react.dev/)
260 | - [Tutorial interactivo de React](https://es.react.dev/learn/tutorial-tic-tac-toe)
261 | - [React: Guía completa en MDN](https://developer.mozilla.org/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
262 | - [usehooks.com (ejemplos de hooks personalizados)](https://usehooks.com/)
263 | - [React en YouTube: Midudev](https://www.youtube.com/playlist?list=PLUofhDIg_38q4D1pyaXsu2Ic1Q0Q8kB1l)
264 |
--------------------------------------------------------------------------------
/02-css/README.md:
--------------------------------------------------------------------------------
1 | ## Apuntes de CSS
2 |
3 | ### 1. Definición
4 |
5 | CSS (Cascading Style Sheets) es el lenguaje utilizado para definir la apariencia y el diseño de un documento HTML. Permite aplicar estilos a los elementos mediante reglas de estilo.
6 |
7 | #### 1.1
8 |
9 | ```css
10 | selector {
11 | propiedad: valor;
12 | }
13 | ```
14 |
15 | ### 2. Formas de Aplicar CSS
16 |
17 | Existen tres formas de aplicar CSS en un documento HTML:
18 |
19 | #### 2.1 CSS en Línea
20 |
21 | Se usa el atributo `style` dentro de una etiqueta HTML.
22 |
23 | ```html
24 | <p style="color: blue; font-size: 20px;">Texto en azul y tamaño 20px.</p>
25 | ```
26 |
27 | #### 2.2 CSS Interno
28 |
29 | Se usa dentro de la etiqueta `<style>` en el `<head>` del documento HTML.
30 |
31 | ```html
32 | <style>
33 | p {
34 | color: blue;
35 | font-size: 20px;
36 | }
37 | </style>
38 | ```
39 |
40 | #### 2.3 CSS Externo
41 |
42 | Se enlaza un archivo `.css` con la etiqueta `<link>` en el `<head>` del documento HTML.
43 |
44 | ```html
45 | <link rel="stylesheet" href="styles.css" />
46 | ```
47 |
48 | En `styles.css`:
49 |
50 | ```css
51 | p {
52 | color: blue;
53 | font-size: 20px;
54 | }
55 | ```
56 |
57 | ### 3. Selectores en CSS
58 |
59 | **‼️La especificidad en CSS es un sistema de jerarquía que determina qué reglas de estilo tienen prioridad sobre otras cuando se aplican múltiples reglas a un mismo elemento.**
60 |
61 | #### Cálculo de especificidad:
62 |
63 | - **Selectores de tipo y pseudoelementos (`h1`, `p`, `::before`)**: 1 punto
64 | - **Selectores de clase, atributos y pseudoclases (`.clase`, `[atributo]`, `:hover`)**: 10 puntos
65 | - **Selectores de ID (`#id`)**: 100 puntos
66 | - **Estilos en línea (`style="color: red;"`)**: 1000 puntos
67 |
68 | Ejemplo de especificidad:
69 |
70 | ```html
71 | <h1 class="clase-titulo" id="id-titulo">Hola soy un re título</h1>
72 | ```
73 |
74 | ```css
75 | h1 {
76 | color: blue;
77 | } /* 1 punto */
78 | .clase-titulo {
79 | color: green;
80 | } /* 10 puntos */
81 | #id-titulo {
82 | color: red;
83 | } /* 100 puntos */
84 | ```
85 |
86 | **El color final será rojo, ya que el selector de ID tiene mayor especificidad.**
87 |
88 | #### Selector universal `*`
89 |
90 | - selecciona todos los elementos de un documento HTML
91 | - su nivel de especificidad es el mas bajo de todos.
92 |
93 | ```css
94 | * {
95 | margin: 0;
96 | padding: 0;
97 | box-sizing: border-box;
98 | }
99 | ```
100 |
101 | #### 3.1 Selector de Etiqueta
102 |
103 | Selecciona todos los elementos que tegan la etiqueta `<h1>`
104 |
105 | ```css
106 | h1 {
107 | color: red;
108 | }
109 | ```
110 |
111 | #### 3.2 Selector de Clase
112 |
113 | Se usa `.` antes del nombre de la clase. Selecciona todos los elementos que tengan ese mismo nombre de clase
114 |
115 | ```css
116 | .destacado {
117 | font-weight: bold;
118 | }
119 | ```
120 |
121 | ```html
122 | <p class="destacado">Este texto ahora está en negrita.</p>
123 | ```
124 |
125 | #### 3.3 Selector de ID
126 |
127 | Se usa `#` antes del nombre del ID. Es un selector único, solo se puede usar en 1 solo elemento de un archivo html
128 |
129 | ```css
130 | #titulo {
131 | text-align: center;
132 | }
133 | ```
134 |
135 | ```html
136 | <h1 id="titulo">Un re título</h1>
137 | ```
138 |
139 | #### 3.4 Selectores Agrupados
140 |
141 | Permiten aplicar los mismos estilos a varios elementos.
142 |
143 | ```css
144 | h1,
145 | p {
146 | color: green;
147 | }
148 | ```
149 |
150 | #### 3.5 Selectores Anidados
151 |
152 | Seleccionan elementos dentro de otros elementos.
153 |
154 | ```css
155 | div p {
156 | color: blue;
157 | }
158 | ```
159 |
160 | ### 4. Propiedades Básicas
161 |
162 | #### 4.1 Color de Texto y Fondo
163 |
164 | ```css
165 | p {
166 | color: white;
167 | background-color: black;
168 | }
169 | ```
170 |
171 | #### 4.2 Tamaño y Tipo de Fuente
172 |
173 | ```css
174 | p {
175 | font-size: 16px;
176 | font-family: System-ui, sans-serif;
177 | }
178 | ```
179 |
180 | #### 4.3 Alineación de Texto
181 |
182 | ```css
183 | h1 {
184 | text-align: center;
185 | }
186 | ```
187 |
188 | ### 4.4 Margin y Padding
189 |
190 | #### Hay 3 formas diferentes de usar `margin` y `padding`:
191 |
192 | **1. Propiedades individuales:**
193 |
194 | ```css
195 | margin-top: 10px;
196 | margin-right: 20px;
197 | margin-bottom: 30px;
198 | margin-left: 40px;
199 | ```
200 |
201 | ```css
202 | padding-top: 10px;
203 | padding-right: 20px;
204 | padding-bottom: 30px;
205 | padding-left: 40px;
206 | ```
207 |
208 | **2. Margen/Padding en dos direcciones:**
209 |
210 | ```css
211 | margin: 10px 20px; /* Arriba/Abajo 10px, Izquierda/Derecha 20px */
212 | ```
213 |
214 | ```css
215 | padding: 10px 20px; /* Arriba/Abajo 10px, Izquierda/Derecha 20px */
216 | ```
217 |
218 | **3. Margen/Padding con shorthand:**
219 |
220 | ```css
221 | margin: 10px 20px 30px 40px; /* Arriba 10px, Derecha 20px, Abajo 30px, Izquierda 40px */
222 | ```
223 |
224 | ```css
225 | padding: 10px 20px 30px 40px;
226 | ```
227 |
228 | #### 4.5 Bordes
229 |
230 | Los bordes en CSS permiten definir el contorno de un elemento. Se pueden personalizar en grosor, estilo y color.
231 |
232 | **Ejemplo básico shorthand:**
233 |
234 | ```css
235 | div {
236 | border: 2px solid red;
237 | }
238 | ```
239 |
240 | **Donde `border` es una propiedad que recibe 3 parámetros => ancho - tipo - color**
241 |
242 | **Propiedades individuales:**
243 |
244 | ```css
245 | div {
246 | border-width: 2px; /* Ancho del borde */
247 | border-style: solid; /* Tipo del borde */
248 | border-color: red; /* Color del borde */
249 | }
250 | ```
251 |
252 | **Tipos de bordes disponibles:**
253 |
254 | ```css
255 | border-style: solid; /* Línea sólida */
256 | border-style: dashed; /* Línea punteada */
257 | border-style: dotted; /* Línea de puntos */
258 | border-style: double; /* Doble línea */
259 | border-style: groove; /* Apariencia de tallado */
260 | border-style: ridge; /* Apariencia de relieve */
261 | border-style: inset; /* Apariencia de hundido */
262 | border-style: outset; /* Apariencia de elevado */
263 | ```
264 |
265 | **Bordes en lados específicos:**
266 |
267 | ```css
268 | div {
269 | border-top: 2px solid blue;
270 | border-right: 3px dashed green;
271 | border-bottom: 4px double orange;
272 | border-left: 5px dotted purple;
273 | }
274 | ```
275 |
276 | **Bordes redondeados:**
277 |
278 | ```css
279 | div {
280 | border-radius: 10px; /* Bordes redondeados */
281 | }
282 | ```
283 |
284 | **Bordes con diferentes radios en cada esquina:**
285 |
286 | ```css
287 | div {
288 | border-top-left-radius: 5px;
289 | border-top-right-radius: 10px;
290 | border-bottom-right-radius: 15px;
291 | border-bottom-left-radius: 20px;
292 | }
293 | ```
294 |
295 | #### 4.6 Sombras de caja
296 |
297 | ```css
298 | div {
299 | box-shadow: 4px 4px 10px rgba(255, 255, 255, 0.5);
300 | }
301 | ```
302 |
303 | ##### Los valores que toma son los siguientes:
304 |
305 | 1. desplazamiento horizontal (x) de la sombra (con valores positivos se mueve a la derecha y con negativos a la izquierda)
306 | 2. desplazamiento vertical (y) de la sombra (con valores positivos se mueve hacia abajo y con negativos hacia arriba)
307 | 3. difuminado de la sombra (blur)
308 | 4. color de la sombra
309 |
310 | #### 4.6 Ancho y Alto
311 |
312 | Las propiedades `width` y `height` permiten definir el tamaño de un elemento.
313 |
314 | **Ejemplo básico:**
315 |
316 | ```css
317 | div {
318 | width: 200px;
319 | height: 100px;
320 | }
321 | ```
322 |
323 | **Unidades de medida:**
324 |
325 | - `px` (píxeles)
326 | - `%` (porcentaje respecto al elemento contenedor)
327 | - `em` (relativo al tamaño de fuente del elemento padre)
328 | - `rem` (equivale al tamaño de fuente del elemento raíz (html)).
329 | - `vw` (porcentaje del ancho de la ventana del navegador)
330 | - `vh` (porcentaje del alto de la ventana del navegador)
331 | - `auto` (ajusta automáticamente el tamaño según el contenido)
332 |
333 | **Ejemplos:**
334 |
335 | ```css
336 | div {
337 | width: 50%; /* 50% del contenedor padre */
338 | height: 30vh; /* 30% de la altura de la ventana */
339 | }
340 | ```
341 |
342 | **Uso de `max-width`, `min-width`, `max-height` y `min-height`:**
343 |
344 | ```css
345 | div {
346 | min-width: 100px; /* Ancho mínimo */
347 | max-width: 500px; /* Ancho máximo */
348 | min-height: 50px; /* Alto mínimo */
349 | max-height: 300px; /* Alto máximo */
350 | }
351 | ```
352 |
353 | ### 4.7 Propiedades de Background
354 |
355 | **Propiedades individuales:**
356 |
357 | ```css
358 | background-color: #f0f0f0;
359 | background-image: url("imagen.jpg");
360 | background-repeat: no-repeat;
361 | background-position: center;
362 | background-size: cover;
363 | background-attachment: fixed;
364 | ```
365 |
366 | **Uso del shorthand `background`**
367 |
368 | ```css
369 | background: #f0f0f0 url("imagen.jpg") no-repeat center/cover fixed;
370 | ```
371 |
372 | ## 5. Propiedades Avanzadas en CSS
373 |
374 | ### 5.1 Filtros (Filter)
375 |
376 | ```css
377 | filter: blur(5px);
378 | filter: brightness(150%);
379 | filter: contrast(120%);
380 | filter: grayscale(50%);
381 | filter: sepia(80%);
382 | filter: hue-rotate(90deg);
383 | filter: invert(100%);
384 | filter: opacity(0.5);
385 | filter: saturate(200%);
386 | ```
387 |
388 | ### 5.2 Transformaciones (Transform)
389 |
390 | ```css
391 | transform: rotate(45deg);
392 | transform: scale(1.5);
393 | transform: translate(50px, 100px);
394 | transform: skew(20deg, 10deg);
395 | ```
396 |
397 | ### 6. Modelo de Caja en CSS
398 |
399 | Cada elemento en CSS se representa como una caja rectangular compuesta por:
400 |
401 | - **Contenido**: Texto o elementos dentro de la caja.
402 | - **Padding**: Espacio entre el contenido y el borde.
403 | - **Borde**: Contorno del elemento.
404 | - **Margen**: Espacio externo entre elementos.
405 |
406 | ```css
407 | div {
408 | width: 200px;
409 | padding: 10px;
410 | border: 5px solid black;
411 | margin: 20px;
412 | }
413 | ```
414 |
415 | ### 7. Posicionamiento en CSS
416 |
417 | - `static`: Posición por defecto.
418 | - `relative`: Relativa a su posición original.
419 | - `absolute`: Relativa a su ancestro más cercano con posición relativa.
420 | - `fixed`: Se mantiene fijo en pantalla.
421 | - `sticky`: Se comporta como `relative` hasta un umbral de desplazamiento.
422 |
423 | ### 7.1 Posicionamiento Estático (Por Defecto)
424 |
425 | ```css
426 | div {
427 | position: static;
428 | }
429 | ```
430 |
431 | ### 7.2 Posicionamiento Relative
432 |
433 | ```css
434 | div {
435 | position: relative;
436 | top: 20px;
437 | left: 10px;
438 | }
439 | ```
440 |
441 | ### 7.3 Posicionamiento Absolute
442 |
443 | ```css
444 | div {
445 | position: absolute;
446 | top: 50px;
447 | left: 50px;
448 | }
449 | ```
450 |
451 | ### 7.4 Posicionamiento Fixed
452 |
453 | ```css
454 | header {
455 | position: fixed;
456 | top: 0;
457 | width: 100%;
458 | }
459 | ```
460 |
461 | ### 7.5 Posicionamiento
462 |
463 | ```css
464 | nav {
465 | position: sticky;
466 | top: 0;
467 | }
468 | ```
469 |
470 | ### 8 Pseudoclases y Pseudoelementos
471 |
472 | #### 8.1 Pseudoclases
473 |
474 | Las pseudoclases permiten aplicar estilos a un elemento en función de su estado o posición dentro del documento.
475 |
476 | **Ejemplos de pseudoclases comunes:**
477 |
478 | - `:hover` (cuando el mouse pasa sobre un elemento)
479 | - `:focus` (cuando un elemento está enfocado)
480 | - `:nth-child(n)` (selecciona elementos según su posición)
481 |
482 | **Ejemplo de uso:**
483 |
484 | ```css
485 | /* Cambia el color del texto cuando el usuario pasa el mouse sobre el enlace */
486 | a:hover {
487 | color: red;
488 | }
489 |
490 | /* Aplica un borde cuando un input está enfocado */
491 | input:focus {
492 | border: 2px solid blue;
493 | }
494 |
495 | /* Selecciona el tercer elemento de una lista */
496 | li:nth-child(3) {
497 | font-weight: bold;
498 | }
499 | ```
500 |
501 | **Otras pseudoclases útiles:**
502 |
503 | ```css
504 | /* Selecciona el primer elemento de su tipo dentro de un contenedor */
505 | p:first-of-type {
506 | color: green;
507 | }
508 |
509 | /* Selecciona los elementos pares de una lista */
510 | tr:nth-child(even) {
511 | background-color: lightgray;
512 | }
513 |
514 | /* Selecciona el último hijo de un contenedor */
515 | div:last-child {
516 | margin-bottom: 20px;
517 | }
518 | ```
519 |
520 | ---
521 |
522 | #### 8.2 Pseudoelementos
523 |
524 | Los pseudoelementos permiten aplicar estilos a partes específicas de un elemento sin necesidad de modificar el HTML.
525 |
526 | **Ejemplos de pseudoelementos comunes:**
527 |
528 | - `::before` (inserta contenido antes del elemento)
529 | - `::after` (inserta contenido después del elemento)
530 |
531 | **Ejemplo de uso:**
532 |
533 | ```css
534 | /* Inserta un texto antes de cada párrafo */
535 | p::before {
536 | content: "Inicio: ";
537 | font-weight: bold;
538 | }
539 |
540 | /* Inserta una flecha después de los enlaces */
541 | a::after {
542 | content: " →";
543 | color: gray;
544 | }
545 | ```
546 |
547 | **Otros usos comunes:**
548 |
549 | ```css
550 | /* Simula una lista numerada agregando números antes de cada elemento */
551 | li::before {
552 | content: counter(item) ". ";
553 | counter-increment: item;
554 | }
555 |
556 | /* Resalta la primera letra de un párrafo */
557 | p::first-letter {
558 | font-size: 2em;
559 | color: blue;
560 | }
561 |
562 | /* Aplica un estilo a la primera línea de un párrafo */
563 | p::first-line {
564 | font-weight: bold;
565 | }
566 | ```
567 |
568 | ## 9 Flexbox en CSS
569 |
570 | Flexbox es un método de diseño **unidimensional** para organizar elementos en filas o columnas.
571 |
572 | ### Propiedades del Flex Container:
573 |
574 | - `display: flex;`
575 | - `flex-direction: row | column | row-reverse | column-reverse;`
576 | - `justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;`
577 | - `align-items: flex-start | flex-end | center | stretch | baseline;`
578 | - `flex-wrap: nowrap | wrap | wrap-reverse;`
579 |
580 | ### Propiedades del Flex Item:
581 |
582 | - `flex-grow: 1;` (Controla la expansión del elemento)
583 | - `flex-shrink: 1;` (Controla la reducción del elemento)
584 | - `flex-basis: auto;` (Tamaño inicial antes de aplicar `flex-grow` y `flex-shrink`)
585 | - `align-self: auto | flex-start | flex-end | center | baseline | stretch;`
586 |
587 | #### Ejemplo en HTML:
588 |
589 | ```html
590 | <div class="container">
591 | <div class="item">1</div>
592 | <div class="item">2</div>
593 | <div class="item">3</div>
594 | </div>
595 | ```
596 |
597 | #### Propiedades del Flex Container:
598 |
599 | ```css
600 | .container {
601 | display: flex;
602 | flex-direction: row; /* o column, row-reverse, column-reverse */
603 | justify-content: space-between; /* o flex-start, flex-end, center, space-around, space-evenly */
604 | align-items: center; /* o flex-start, flex-end, stretch, baseline */
605 | flex-wrap: wrap; /* o nowrap, wrap-reverse */
606 | }
607 | ```
608 |
609 | #### Propiedades del Flex Item:
610 |
611 | ```css
612 | .item {
613 | flex-grow: 1; /* Expande proporcionalmente */
614 | flex-shrink: 1; /* Reduce proporcionalmente */
615 | flex-basis: 100px; /* Tamaño base antes de aplicar flex-grow y flex-shrink */
616 | align-self: center; /* o flex-start, flex-end, baseline, stretch */
617 | }
618 | ```
619 |
620 | ## 10 Grid en CSS
621 |
622 | CSS Grid es un sistema de diseño **bidimensional** que permite organizar elementos en filas y columnas.
623 |
624 | ### Propiedades del Grid Container:
625 |
626 | - `display: grid;`
627 | - `grid-template-columns: repeat(3, 1fr);`
628 | - `grid-template-rows: repeat(2, auto);`
629 | - `gap: 10px;`
630 | - `justify-items: start | end | center | stretch;`
631 | - `align-items: start | end | center | stretch;`
632 |
633 | ### Propiedades del Grid Item:
634 |
635 | - `grid-column: 1 / span 2;`
636 | - `grid-row: 1 / span 2;`
637 | - `justify-self: start | end | center | stretch;`
638 | - `align-self: start | end | center | stretch;`
639 |
640 | #### Ejemplo en HTML:
641 |
642 | ```html
643 | <div class="grid-container">
644 | <div class="grid-item">A</div>
645 | <div class="grid-item">B</div>
646 | <div class="grid-item">C</div>
647 | <div class="grid-item">D</div>
648 | <div class="grid-item">E</div>
649 | <div class="grid-item">F</div>
650 | </div>
651 | ```
652 |
653 | #### Propiedades del Grid Container:
654 |
655 | ```css
656 | .grid-container {
657 | display: grid;
658 | grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */
659 | grid-template-rows: repeat(2, auto); /* 2 filas con altura automática */
660 | gap: 10px; /* Espaciado entre celdas */
661 | justify-items: center; /* o start, end, stretch */
662 | align-items: center; /* o start, end, stretch */
663 | }
664 | ```
665 |
666 | #### Propiedades del Grid Item:
667 |
668 | ```css
669 | .grid-item {
670 | grid-column: 1 / span 2; /* Ocupa dos columnas */
671 | grid-row: 1 / span 2; /* Ocupa dos filas */
672 | justify-self: center; /* o start, end, stretch */
673 | align-self: center; /* o start, end, stretch */
674 | }
675 | ```
676 |
677 | ### 11. Media Queries
678 |
679 | Permiten hacer diseños responsivos.
680 |
681 | ```css
682 | @media (max-width: 600px) {
683 | body {
684 | background-color: lightgray;
685 | }
686 | }
687 | ```
688 |
689 | ### 12. Animaciones y Transiciones
690 |
691 | #### 12.1 Transiciones
692 |
693 | ```css
694 | div {
695 | transition: all 0.5s ease-in-out;
696 | }
697 | ```
698 |
699 | #### 12.2 Animaciones
700 |
701 | ```css
702 | @keyframes mover {
703 | from {
704 | transform: translateX(0);
705 | }
706 | to {
707 | transform: translateX(100px);
708 | }
709 | }
710 |
711 | .box {
712 | animation: mover 2s infinite alternate;
713 | }
714 | ```
715 |
716 | ### 📚 Enlaces a Documentación Oficial
717 |
718 | [MDN Web Docs](https://developer.mozilla.org/es/docs/Web/CSS) Todo sobre CSS
719 |
720 | [Flexbox Froggy](https://flexboxfroggy.com/#es) Aprender Flex
721 |
722 | [Grid Garden](https://cssgridgarden.com/#es) Aprende Grid
723 |
--------------------------------------------------------------------------------
/04-javascript/README.md:
--------------------------------------------------------------------------------
1 | # Apuntes de JavaScript
2 |
3 | ## 1. Definición
4 |
5 | JavaScript es un lenguaje de programación interpretado, orientado a objetos, utilizado principalmente para dotar de interactividad a las páginas web. Se ejecuta en el navegador, aunque también puede usarse en el servidor (Node.js). Es multiparadigma: permite programar de manera imperativa, orientada a objetos y funcional, entre otros estilos.
6 |
7 | ## 2. Sintaxis básica
8 |
9 | - Las instrucciones suelen terminar con punto y coma (`;`), aunque es opcional en la mayoría de los casos.
10 | - Es sensible a mayúsculas y minúsculas (`nombre` y `Nombre` son variables diferentes).
11 | - Los bloques de código se delimitan con llaves `{}`.
12 | - Los comentarios se escriben con `//` para una línea o `/* ... */` para varias líneas.
13 |
14 | ## 3. Variables y Tipos de Datos
15 |
16 | - `var`: Declaración antigua, con alcance de función. Puede provocar errores por hoisting y redeclaración, por lo que se recomienda evitarla.
17 | - `let`: Permite declarar variables con alcance de bloque. Es la forma recomendada para variables que cambian su valor.
18 | - `const`: Declara constantes, es decir, variables cuyo valor no puede ser reasignado. También tiene alcance de bloque.
19 |
20 | Tipos de datos primitivos:
21 |
22 | - **Number**: Números enteros y decimales (`42`, `3.14`)
23 | - **String**: Cadenas de texto (`"Hola"`, `'Mundo'`)
24 | - **Boolean**: Valores lógicos (`true`, `false`)
25 | - **Null**: Ausencia intencional de valor
26 | - **Undefined**: Variable declarada pero sin valor asignado
27 | - **Symbol**: Identificadores únicos (ES6)
28 |
29 | Tipo de dato compuesto:
30 |
31 | - **Object**: Colección de pares clave-valor, incluye arrays y funciones
32 | - **Function**: Las funciones en JavaScript son objetos especiales de tipo `function` (aunque técnicamente son un subtipo de objeto, `typeof` devuelve "function")
33 |
34 | ### Operador typeof
35 |
36 | El operador `typeof` permite saber el tipo de dato de una variable o valor.
37 |
38 | ```js
39 | console.log(typeof 42); // "number"
40 | console.log(typeof "hola"); // "string"
41 | console.log(typeof true); // "boolean"
42 | console.log(typeof {}); // "object"
43 | console.log(typeof undefined); // "undefined"
44 | console.log(typeof null); // "object" (caso especial)
45 | console.log(typeof function () {}); // "function"
46 | ```
47 |
48 | > **Observación:** El tipo `null` es un caso especial en JavaScript. Si bien representa la ausencia intencional de valor, el operador `typeof null` devuelve `'object'` debido a un error histórico en el lenguaje. Este comportamiento es conocido y documentado, pero puede resultar confuso para principiantes. [Más información](https://2ality.com/2013/10/typeof-null.html)
49 |
50 | ## 4. Operadores y Estructuras de Control
51 |
52 | - **Aritméticos**: `+`, `-`, `*`, `/`, `%`, `**`
53 | - **Comparación**: `==`, `===`, `!=`, `!==`, `>`, `<`, `>=`, `<=` (usar `===` y `!==` para evitar errores de tipo)
54 | - **Lógicos**: `&&` (y), `||` (o), `!` (negación)
55 | - **Asignación**: `=`, `+=`, `-=`, `*=`, `/=`, etc.
56 | - **Ternario**: `condición ? valor1 : valor2`
57 | - **Propagación/Rest**: `...` (ver ES6)
58 |
59 | ### Condicionales
60 |
61 | ```js
62 | if (edad >= 18) {
63 | console.log("Mayor de edad");
64 | } else if (edad > 12) {
65 | console.log("Adolescente");
66 | } else {
67 | console.log("Menor de edad");
68 | }
69 |
70 | // Operador ternario
71 | const mensaje = edad >= 18 ? "Mayor de edad" : "Menor de edad";
72 | ```
73 |
74 | ### Bucles
75 |
76 | ```js
77 | for (let i = 0; i < 5; i++) {
78 | console.log(i);
79 | }
80 |
81 | let j = 0;
82 | while (j < 5) {
83 | console.log(j);
84 | j++;
85 | }
86 |
87 | do {
88 | console.log(j);
89 | j++;
90 | } while (j < 10);
91 | ```
92 |
93 | ## 5. Funciones
94 |
95 | Las funciones permiten agrupar código reutilizable y estructurar programas de manera modular. Son ciudadanos de primera clase: pueden asignarse a variables, pasarse como argumentos y devolverse desde otras funciones.
96 |
97 | ### Declaración de función
98 |
99 | ```js
100 | function saludar(nombre) {
101 | return "Hola " + nombre;
102 | }
103 | console.log(saludar("Ana"));
104 | ```
105 |
106 | ### Expresión de función
107 |
108 | ```js
109 | const despedir = function (nombre) {
110 | return "Chau " + nombre;
111 | };
112 | console.log(despedir("Juan"));
113 | ```
114 |
115 | ### Función flecha (Arrow Function, ES6)
116 |
117 | ```js
118 | const sumar = (a, b) => a + b;
119 | const enMayus = (texto) => texto.toUpperCase();
120 | const multiplicar = (a, b) => {
121 | const resultado = a * b;
122 | return resultado;
123 | };
124 | ```
125 |
126 | ### Hoisting
127 |
128 | Las declaraciones de función se "elevan" y pueden usarse antes de ser declaradas. Las expresiones y funciones flecha no:
129 |
130 | ```js
131 | console.log(sumar(2, 2)); // 4
132 | function sumar(a, b) {
133 | return a + b;
134 | }
135 |
136 | console.log(restar(5, 2)); // Error
137 | const restar = function (a, b) {
138 | return a - b;
139 | };
140 | ```
141 |
142 | ### Parámetros por defecto y argumentos variables
143 |
144 | ```js
145 | function saludar(nombre = "Invitado") {
146 | return "Hola " + nombre;
147 | }
148 | console.log(saludar());
149 |
150 | function sumarTodo(...numeros) {
151 | return numeros.reduce((acc, n) => acc + n, 0);
152 | }
153 | console.log(sumarTodo(1, 2, 3, 4));
154 | ```
155 |
156 | ### IIFE (Immediately Invoked Function Expression)
157 |
158 | ```js
159 | (function () {
160 | console.log("Esto se ejecuta inmediatamente");
161 | })();
162 |
163 | (function (nombre) {
164 | console.log("Hola, " + nombre);
165 | })("Mundo");
166 | ```
167 |
168 | > **Advertencia:** Hoy en día, para la mayoría de los casos, es preferible usar módulos o bloques con `let`/`const` para evitar variables globales. Las IIFE aún pueden ser útiles en scripts simples o para encapsular variables privadas.
169 |
170 | #### Caso práctico: Encapsulamiento de variables privadas
171 |
172 | ```js
173 | const contador = (function () {
174 | let valor = 0;
175 | return {
176 | incrementar: function () {
177 | valor++;
178 | },
179 | obtener: function () {
180 | return valor;
181 | },
182 | };
183 | })();
184 | contador.incrementar();
185 | console.log(contador.obtener()); // 1
186 | ```
187 |
188 | ## 6. Objetos y Arrays
189 |
190 | ### Objetos
191 |
192 | ```js
193 | const persona = {
194 | nombre: "Ana",
195 | edad: 30,
196 | saludar: function () {
197 | console.log("Hola, soy " + this.nombre);
198 | },
199 | };
200 | persona.saludar();
201 | ```
202 |
203 | ### Arrays
204 |
205 | ```js
206 | const numeros = [1, 2, 3, 4];
207 | console.log(numeros[0]); // 1
208 | ```
209 |
210 | ### Métodos útiles de arrays
211 |
212 | ```js
213 | const dobles = numeros.map((n) => n * 2);
214 | const pares = numeros.filter((n) => n % 2 === 0);
215 | const suma = numeros.reduce((acc, n) => acc + n, 0);
216 | numeros.forEach((n) => console.log(n));
217 | const primeroMayorA2 = numeros.find((n) => n > 2);
218 | ```
219 |
220 | ## 7. Manipulación del DOM
221 |
222 | El DOM (Document Object Model) es la representación estructurada de una página web. JavaScript permite acceder y modificar el DOM para cambiar el contenido, estilos y estructura de la página en tiempo real.
223 |
224 | ### Selección de elementos
225 |
226 | ```js
227 | document.getElementById("miElemento").textContent = "Nuevo texto";
228 | document.querySelector(".clase").style.color = "red";
229 | const items = document.querySelectorAll("li");
230 | items.forEach((item) => (item.style.fontWeight = "bold"));
231 | ```
232 |
233 | ### Parentescos y navegación en el DOM
234 |
235 | ```js
236 | const lista = document.getElementById("miLista");
237 | console.log(lista.parentNode); // Nodo padre
238 | console.log(lista.children); // HTMLCollection de hijos (elementos)
239 | console.log(lista.childNodes); // NodeList de todos los nodos hijos
240 | console.log(lista.firstChild); // Primer nodo hijo (puede ser texto)
241 | console.log(lista.firstElementChild); // Primer hijo que es un elemento
242 | console.log(lista.lastChild); // Último nodo hijo
243 | console.log(lista.lastElementChild); // Último hijo que es un elemento
244 |
245 | const primerItem = lista.firstElementChild;
246 | console.log(primerItem.nextElementSibling); // Segundo elemento de la lista
247 | console.log(primerItem.previousElementSibling); // null (no hay anterior)
248 | ```
249 |
250 | ### Modificación de contenido y atributos
251 |
252 | ```js
253 | document.getElementById("miElemento").innerHTML =
254 | "<strong>Texto en negrita</strong>";
255 | document.getElementById("miElemento").setAttribute("title", "Tooltip");
256 | ```
257 |
258 | ### Creación y eliminación de elementos
259 |
260 | ```js
261 | const nuevoDiv = document.createElement("div");
262 | nuevoDiv.textContent = "Soy un nuevo div";
263 | document.body.appendChild(nuevoDiv);
264 | document.body.removeChild(nuevoDiv);
265 | ```
266 |
267 | ### Cambiar estilos
268 |
269 | ```js
270 | document.getElementById("miElemento").style.backgroundColor = "yellow";
271 | ```
272 |
273 | ## 8. Eventos
274 |
275 | ```js
276 | document.getElementById("btn").addEventListener("click", function () {
277 | alert("¡Clic!");
278 | });
279 | document.addEventListener("keydown", function (event) {
280 | console.log("Tecla presionada: " + event.key);
281 | });
282 | ```
283 |
284 | - Se recomienda usar `addEventListener` en vez de atributos HTML (`onclick`, etc.) para separar lógica y estructura.
285 |
286 | ## 9. Callbacks y Closures
287 |
288 | ### Callback
289 |
290 | ```js
291 | function procesarUsuario(nombre, callback) {
292 | callback("Hola " + nombre);
293 | }
294 | procesarUsuario("Juan", function (mensaje) {
295 | console.log(mensaje);
296 | });
297 | ```
298 |
299 | ### Closure
300 |
301 | ```js
302 | function crearContador() {
303 | let contador = 0;
304 | return function () {
305 | contador++;
306 | return contador;
307 | };
308 | }
309 | const contador = crearContador();
310 | console.log(contador()); // 1
311 | console.log(contador()); // 2
312 | ```
313 |
314 | ## 10. localStorage
315 |
316 | Permite almacenar datos en el navegador de forma persistente (incluso si se cierra la pestaña o el navegador). Los datos se guardan como cadenas de texto.
317 |
318 | ```js
319 | localStorage.setItem("usuario", "Ana");
320 | const usuario = localStorage.getItem("usuario");
321 | localStorage.removeItem("usuario");
322 | localStorage.clear();
323 | ```
324 |
325 | - Ideal para guardar configuraciones, temas, preferencias, etc.
326 | - No usar para datos sensibles (no es seguro).
327 |
328 | ### Guardar y recuperar objetos o arrays
329 |
330 | Para almacenar estructuras complejas (objetos, arrays), es necesario convertirlas a texto usando `JSON.stringify` y luego recuperarlas con `JSON.parse`:
331 |
332 | ```js
333 | const persona = { nombre: "Ana", edad: 30 };
334 | localStorage.setItem("persona", JSON.stringify(persona));
335 |
336 | const personaGuardada = JSON.parse(localStorage.getItem("persona"));
337 | console.log(personaGuardada.nombre); // "Ana"
338 | ```
339 |
340 | ## 11. ES6 (ECMAScript 2015+) y características modernas
341 |
342 | ES6 introdujo muchas mejoras y nuevas características al lenguaje. Aquí se agrupan las más importantes y modernas:
343 |
344 | ### let y const
345 |
346 | Permiten declarar variables con alcance de bloque, evitando problemas de hoisting y redeclaración.
347 |
348 | ### Funciones flecha (Arrow Functions)
349 |
350 | Sintaxis más corta para funciones anónimas. No tienen su propio `this`.
351 |
352 | ```js
353 | const sumar = (a, b) => a + b;
354 | ```
355 |
356 | ### Template strings
357 |
358 | Permiten crear cadenas de texto con variables y saltos de línea fácilmente usando backticks (`` ` ``).
359 |
360 | ```js
361 | const nombre = "Ana";
362 | console.log(`Hola, ${nombre}!");
363 | ```
364 |
365 | ### Destructuring (Desestructuración)
366 |
367 | Permite extraer valores de objetos o arrays en variables individuales de forma concisa.
368 |
369 | ```js
370 | // Objetos
371 | const persona = { nombre: "Ana", edad: 30, ciudad: "Córdoba" };
372 | const { nombre, edad, ciudad: localidad, pais = "Argentina" } = persona;
373 | console.log(nombre, edad, localidad, pais);
374 |
375 | // Arrays
376 | const numeros = [1, 2, 3, 4];
377 | const [primero, segundo, ...resto] = numeros;
378 | console.log(primero, segundo, resto);
379 | ```
380 |
381 | ### Spread Operator (`...`)
382 |
383 | Permite expandir elementos de un array u objeto.
384 |
385 | ```js
386 | const arr1 = [1, 2, 3];
387 | const arr2 = [4, 5];
388 | const combinado = [...arr1, ...arr2];
389 | console.log(combinado);
390 |
391 | const obj1 = { a: 1, b: 2 };
392 | const obj2 = { b: 3, c: 4 };
393 | const objCombinado = { ...obj1, ...obj2 };
394 | console.log(objCombinado);
395 | ```
396 |
397 | ### Rest Operator (`...`)
398 |
399 | Permite agrupar el resto de los elementos en un array o los argumentos en una función.
400 |
401 | ```js
402 | function sumar(...numeros) {
403 | return numeros.reduce((acc, n) => acc + n, 0);
404 | }
405 | console.log(sumar(1, 2, 3, 4));
406 | ```
407 |
408 | ### Clases
409 |
410 | Sintaxis para crear objetos y herencia de forma más clara y similar a otros lenguajes.
411 |
412 | ```js
413 | class Animal {
414 | constructor(nombre) {
415 | this.nombre = nombre;
416 | }
417 | hablar() {
418 | console.log(this.nombre + " hace un ruido");
419 | }
420 | }
421 | class Perro extends Animal {
422 | hablar() {
423 | console.log(this.nombre + " ladra");
424 | }
425 | }
426 | const miPerro = new Perro("Toby");
427 | miPerro.hablar();
428 | ```
429 |
430 | ### Módulos (import/export)
431 |
432 | Permiten dividir el código en archivos reutilizables y organizados.
433 |
434 | ```js
435 | // archivo suma.js
436 | export function suma(a, b) {
437 | return a + b;
438 | }
439 | export const PI = 3.14;
440 | export default function restar(a, b) {
441 | return a - b;
442 | }
443 |
444 | // archivo principal.js
445 | import suma, { PI } from "./suma.js";
446 | import * as operaciones from "./suma.js";
447 | console.log(operaciones.suma(1, 2));
448 | ```
449 |
450 | ## 12. Asincronismo, Promesas y async/await
451 |
452 | JavaScript es asíncrono por naturaleza, lo que significa que puede ejecutar código mientras espera que otras tareas finalicen (como peticiones a servidores, temporizadores, etc.).
453 |
454 | ### setTimeout y setInterval
455 |
456 | ```js
457 | setTimeout(() => {
458 | console.log("Hola después de 1 segundo");
459 | }, 1000);
460 |
461 | let contador = 0;
462 | const intervalo = setInterval(() => {
463 | contador++;
464 | console.log(`Contador: ${contador}`);
465 | if (contador === 5) clearInterval(intervalo);
466 | }, 1000);
467 | ```
468 |
469 | ### Promesas
470 |
471 | ```js
472 | const promesa = new Promise((resolve, reject) => {
473 | setTimeout(() => resolve("Listo!"), 2000);
474 | });
475 | promesa.then((res) => console.log(res)).catch((err) => console.error(err));
476 | ```
477 |
478 | ### async/await
479 |
480 | ```js
481 | async function obtenerDatos() {
482 | try {
483 | const resultado = await promesa;
484 | console.log(resultado);
485 | } catch (error) {
486 | console.error(error);
487 | }
488 | }
489 | obtenerDatos();
490 | ```
491 |
492 | ### fetch: peticiones HTTP modernas
493 |
494 | `fetch` es la API moderna para hacer solicitudes HTTP en JavaScript. Devuelve una promesa que resuelve con un objeto `Response`.
495 |
496 | #### Ejemplo básico de fetch
497 |
498 | ```js
499 | fetch("https://jsonplaceholder.typicode.com/users/1")
500 | .then((response) => response.json())
501 | .then((data) => {
502 | console.log(data);
503 | })
504 | .catch((error) => {
505 | console.error("Error en la petición:", error);
506 | });
507 | ```
508 |
509 | #### Usando async/await con fetch
510 |
511 | ```js
512 | async function traerUsuario() {
513 | try {
514 | const response = await fetch(
515 | "https://jsonplaceholder.typicode.com/users/1"
516 | );
517 | if (!response.ok) throw new Error("Error en la respuesta");
518 | const data = await response.json();
519 | console.log(data);
520 | } catch (error) {
521 | console.error(error);
522 | }
523 | }
524 | traerUsuario();
525 | ```
526 |
527 | ### Estructura de una Request
528 |
529 | Una `Request` es el objeto que representa la petición HTTP. Sus partes principales son:
530 |
531 | - **URL**: dirección a la que se envía la petición
532 | - **Método**: `GET`, `POST`, `PUT`, `DELETE`, etc.
533 | - **Headers**: información adicional (tipo de contenido, autenticación, etc.)
534 | - **Body**: datos enviados (solo en métodos como POST o PUT)
535 |
536 | Ejemplo de uso avanzado:
537 |
538 | ```js
539 | fetch("https://jsonplaceholder.typicode.com/posts", {
540 | method: "POST",
541 | headers: {
542 | "Content-Type": "application/json",
543 | },
544 | body: JSON.stringify({ title: "foo", body: "bar", userId: 1 }),
545 | })
546 | .then((response) => response.json())
547 | .then((data) => console.log(data));
548 | ```
549 |
550 | ### Estructura de una Response
551 |
552 | Una `Response` es el objeto que representa la respuesta del servidor. Sus propiedades más importantes son:
553 |
554 | - **ok**: indica si la respuesta fue exitosa (status 200-299)
555 | - **status**: código de estado HTTP (200, 404, 500, etc.)
556 | - **statusText**: texto del estado
557 | - **headers**: cabeceras de la respuesta
558 | - **body**: el cuerpo de la respuesta (accesible con métodos como `.json()`, `.text()`, etc.)
559 |
560 | Ejemplo de inspección de una Response:
561 |
562 | ```js
563 | fetch("https://jsonplaceholder.typicode.com/users/1")
564 | .then((response) => {
565 | console.log(response.ok); // true
566 | console.log(response.status); // 200
567 | console.log(response.headers.get("Content-Type"));
568 | return response.json();
569 | })
570 | .then((data) => console.log(data));
571 | ```
572 |
573 | ## 13. Recursos recomendados
574 |
575 | - [MDN JavaScript](https://developer.mozilla.org/es/docs/Web/JavaScript)
576 | - [JavaScript.info](https://es.javascript.info/)
577 | - [W3Schools JavaScript](https://www.w3schools.com/js/)
578 | - [Eloquent JavaScript (libro gratuito)](https://eloquentjavascript.net/)
579 |
580 | ## 14. Preparación para React
581 |
582 | Antes de comenzar a aprender React, es fundamental tener una base sólida en los siguientes conceptos de JavaScript:
583 |
584 | - Sintaxis básica y variables (`let`, `const`)
585 | - Tipos de datos
586 | - Funciones (declaradas, expresadas, flecha, IIFE)
587 | - Ámbito (scope) y hoisting
588 | - Callbacks y closures
589 | - Manipulación de arrays y objetos (métodos como `map`, `filter`, `reduce`)
590 | - Destructuring (objetos y arrays)
591 | - Spread y rest operator (`...`)
592 | - Estructuras de control (if, for, while) y ternario
593 | - Manejo de eventos en el DOM
594 | - Promesas, async/await y asincronismo
595 | - Uso de `fetch` para peticiones HTTP
596 | - Manejo de módulos (`import`/`export`)
597 | - Uso de `localStorage` y JSON
598 |
--------------------------------------------------------------------------------
24 | 
25 |
26 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
101 | 
2 |
3 | **Git es el sistema de control de versiones distribuido open sourse que facilita las actividades colaborativas en el desarrollo de software. Acá hay un resume de los comandos usados en clase.**
4 |
5 | **IMPORTANTE**: Si no tienen instalado **_GIT_** en su computadora, deben hacerlo antes de continuar. En el siguiente link pueden descargarlo: [Descargar GIT](https://git-scm.com)
6 |
7 | ‼️ **Recuerden que para ejecutar los comandos en terminal deben estar bien posicionados en la carpeta en la que van a trabajar.**
8 |
9 | ‼️**En la pantalla de instalación deberán seleccionar la 2da opción que dice: "Override the default branch name for new repositories" como se ve en la imagen, después de eso se puede dar todo -NEXT- hasta la opción -INSTALL-**
10 |
11 | 
13 |