diff --git a/_quarto.yml b/_quarto.yml index 18580f8..0ecf893 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -89,6 +89,10 @@ website: >>>>>>> 8e10774 (feat: explicacion semana 10 (#4)) - section: "Bloque IV Comunicación" + contents: + - section: "Semana 11" + contents: + - pages/Bloque4/protocolos.qmd - pages/rubric.qmd diff --git a/docs/about.pdf b/docs/about.pdf index 5aa0478..be621c3 100644 Binary files a/docs/about.pdf and b/docs/about.pdf differ diff --git a/docs/index.html b/docs/index.html index 84f3bda..e72da4a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -543,8 +543,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • diff --git a/docs/index.pdf b/docs/index.pdf index 6434687..454e185 100644 Binary files a/docs/index.pdf and b/docs/index.pdf differ diff --git a/docs/pages/Bloque1/MAcss.html b/docs/pages/Bloque1/MAcss.html index 6b1fb19..0cf50ef 100644 --- a/docs/pages/Bloque1/MAcss.html +++ b/docs/pages/Bloque1/MAcss.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -593,7 +617,7 @@

    MA: Selectores y Pseudoselectores

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque1/MAcss.pdf b/docs/pages/Bloque1/MAcss.pdf index 81973bf..03a2218 100644 Binary files a/docs/pages/Bloque1/MAcss.pdf and b/docs/pages/Bloque1/MAcss.pdf differ diff --git a/docs/pages/Bloque1/MAhtml2.html b/docs/pages/Bloque1/MAhtml2.html index 4d1a8f0..30b7eb1 100644 --- a/docs/pages/Bloque1/MAhtml2.html +++ b/docs/pages/Bloque1/MAhtml2.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -593,7 +617,7 @@

    MA: Mas HTML

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque1/MAhtml2.pdf b/docs/pages/Bloque1/MAhtml2.pdf index d9fd3a0..96343fa 100644 Binary files a/docs/pages/Bloque1/MAhtml2.pdf and b/docs/pages/Bloque1/MAhtml2.pdf differ diff --git a/docs/pages/Bloque1/bloque1.html b/docs/pages/Bloque1/bloque1.html index 80b7f25..51708c2 100644 --- a/docs/pages/Bloque1/bloque1.html +++ b/docs/pages/Bloque1/bloque1.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -600,7 +624,7 @@

    Bloque I Introducción

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque1/bloque1.pdf b/docs/pages/Bloque1/bloque1.pdf index e75a75b..3a4b89b 100644 Binary files a/docs/pages/Bloque1/bloque1.pdf and b/docs/pages/Bloque1/bloque1.pdf differ diff --git a/docs/pages/Bloque1/css.html b/docs/pages/Bloque1/css.html index a247e20..ee9e156 100644 --- a/docs/pages/Bloque1/css.html +++ b/docs/pages/Bloque1/css.html @@ -579,8 +579,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -656,7 +680,7 @@

    CSS

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque1/css.pdf b/docs/pages/Bloque1/css.pdf index d406488..6235781 100644 Binary files a/docs/pages/Bloque1/css.pdf and b/docs/pages/Bloque1/css.pdf differ diff --git a/docs/pages/Bloque1/entorno.html b/docs/pages/Bloque1/entorno.html index 1ea85c4..e85df9a 100644 --- a/docs/pages/Bloque1/entorno.html +++ b/docs/pages/Bloque1/entorno.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -630,7 +654,7 @@

    Preparación del entorno de trabajo

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque1/entorno.pdf b/docs/pages/Bloque1/entorno.pdf index a8710dd..2eb83cd 100644 Binary files a/docs/pages/Bloque1/entorno.pdf and b/docs/pages/Bloque1/entorno.pdf differ diff --git a/docs/pages/Bloque1/html.html b/docs/pages/Bloque1/html.html index b5464fd..42ec4ce 100644 --- a/docs/pages/Bloque1/html.html +++ b/docs/pages/Bloque1/html.html @@ -579,8 +579,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -662,7 +686,7 @@

    HTML

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque1/html.pdf b/docs/pages/Bloque1/html.pdf index b3f3d11..10e81a4 100644 Binary files a/docs/pages/Bloque1/html.pdf and b/docs/pages/Bloque1/html.pdf differ diff --git a/docs/pages/Bloque1/t1.html b/docs/pages/Bloque1/t1.html index cb978cc..272d170 100644 --- a/docs/pages/Bloque1/t1.html +++ b/docs/pages/Bloque1/t1.html @@ -579,8 +579,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -628,7 +652,7 @@

    T1: Web de HL I

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque1/t1.pdf b/docs/pages/Bloque1/t1.pdf index 87ce7c7..492f3e6 100644 Binary files a/docs/pages/Bloque1/t1.pdf and b/docs/pages/Bloque1/t1.pdf differ diff --git a/docs/pages/Bloque1/t1a.html b/docs/pages/Bloque1/t1a.html index ce93187..6395798 100644 --- a/docs/pages/Bloque1/t1a.html +++ b/docs/pages/Bloque1/t1a.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -593,7 +617,7 @@

    TA1: Mi CV I

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque1/t1a.pdf b/docs/pages/Bloque1/t1a.pdf index f149b20..e5ccad5 100644 Binary files a/docs/pages/Bloque1/t1a.pdf and b/docs/pages/Bloque1/t1a.pdf differ diff --git a/docs/pages/Bloque1/t2.html b/docs/pages/Bloque1/t2.html index 7fefe60..05c03da 100644 --- a/docs/pages/Bloque1/t2.html +++ b/docs/pages/Bloque1/t2.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -593,7 +617,7 @@

    T2: Web de HL II

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque1/t2.pdf b/docs/pages/Bloque1/t2.pdf index de0f0c4..b7f185c 100644 Binary files a/docs/pages/Bloque1/t2.pdf and b/docs/pages/Bloque1/t2.pdf differ diff --git a/docs/pages/Bloque1/t2a.html b/docs/pages/Bloque1/t2a.html index ddafa36..59d6b13 100644 --- a/docs/pages/Bloque1/t2a.html +++ b/docs/pages/Bloque1/t2a.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -593,7 +617,7 @@

    TA2: Mi CV II

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque1/t2a.pdf b/docs/pages/Bloque1/t2a.pdf index c75a408..061d79e 100644 Binary files a/docs/pages/Bloque1/t2a.pdf and b/docs/pages/Bloque1/t2a.pdf differ diff --git a/docs/pages/Bloque2/MAclases.html b/docs/pages/Bloque2/MAclases.html index 605000e..f7d4d55 100644 --- a/docs/pages/Bloque2/MAclases.html +++ b/docs/pages/Bloque2/MAclases.html @@ -579,8 +579,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -650,7 +674,7 @@

    MA: Clases ES6

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque2/MAclases.pdf b/docs/pages/Bloque2/MAclases.pdf index ca0600b..5764ad6 100644 Binary files a/docs/pages/Bloque2/MAclases.pdf and b/docs/pages/Bloque2/MAclases.pdf differ diff --git a/docs/pages/Bloque2/intensivo.html b/docs/pages/Bloque2/intensivo.html index 832972b..c0b4768 100644 --- a/docs/pages/Bloque2/intensivo.html +++ b/docs/pages/Bloque2/intensivo.html @@ -579,8 +579,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -701,7 +725,7 @@

    Repaso Intensivo JS

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque2/intensivo.pdf b/docs/pages/Bloque2/intensivo.pdf index 92b59cd..0c9f5a3 100644 Binary files a/docs/pages/Bloque2/intensivo.pdf and b/docs/pages/Bloque2/intensivo.pdf differ diff --git a/docs/pages/Bloque2/jsI.html b/docs/pages/Bloque2/jsI.html index 7e12dd4..787ea0c 100644 --- a/docs/pages/Bloque2/jsI.html +++ b/docs/pages/Bloque2/jsI.html @@ -306,7 +306,7 @@

    Introducción a JS

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque2/jsI.pdf b/docs/pages/Bloque2/jsI.pdf index 69f12e7..0c2894c 100644 Binary files a/docs/pages/Bloque2/jsI.pdf and b/docs/pages/Bloque2/jsI.pdf differ diff --git a/docs/pages/Bloque2/ti.html b/docs/pages/Bloque2/ti.html index d2b3223..58e6572 100644 --- a/docs/pages/Bloque2/ti.html +++ b/docs/pages/Bloque2/ti.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -609,7 +633,7 @@

    TI: Ejercicios JS

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque2/ti.pdf b/docs/pages/Bloque2/ti.pdf index 5649a0b..b869e42 100644 Binary files a/docs/pages/Bloque2/ti.pdf and b/docs/pages/Bloque2/ti.pdf differ diff --git a/docs/pages/Bloque2/tia.html b/docs/pages/Bloque2/tia.html index 250f78d..c5368ab 100644 --- a/docs/pages/Bloque2/tia.html +++ b/docs/pages/Bloque2/tia.html @@ -579,8 +579,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -652,7 +676,7 @@

    TAI: La objetización de las personas

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque2/tia.pdf b/docs/pages/Bloque2/tia.pdf index 42c9143..14c4513 100644 Binary files a/docs/pages/Bloque2/tia.pdf and b/docs/pages/Bloque2/tia.pdf differ diff --git a/docs/pages/Bloque3/DOM.html b/docs/pages/Bloque3/DOM.html index 0a751ac..41cc9b0 100644 --- a/docs/pages/Bloque3/DOM.html +++ b/docs/pages/Bloque3/DOM.html @@ -579,8 +579,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -651,7 +675,7 @@

    DOM

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque3/DOM.pdf b/docs/pages/Bloque3/DOM.pdf index 0615af2..0435f8d 100644 Binary files a/docs/pages/Bloque3/DOM.pdf and b/docs/pages/Bloque3/DOM.pdf differ diff --git a/docs/pages/Bloque3/Intermedio.html b/docs/pages/Bloque3/Intermedio.html index ba370ee..1414aaa 100644 --- a/docs/pages/Bloque3/Intermedio.html +++ b/docs/pages/Bloque3/Intermedio.html @@ -579,8 +579,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -673,7 +697,7 @@

    React III

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque3/Intermedio.pdf b/docs/pages/Bloque3/Intermedio.pdf index 7da9f60..c2ddcde 100644 Binary files a/docs/pages/Bloque3/Intermedio.pdf and b/docs/pages/Bloque3/Intermedio.pdf differ diff --git a/docs/pages/Bloque3/MARef.html b/docs/pages/Bloque3/MARef.html index 77931f1..c5368ef 100644 --- a/docs/pages/Bloque3/MARef.html +++ b/docs/pages/Bloque3/MARef.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -593,7 +617,7 @@

    MA: Uncontrolled fields y useRef

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque3/MARef.pdf b/docs/pages/Bloque3/MARef.pdf index aea8d4e..62d505d 100644 Binary files a/docs/pages/Bloque3/MARef.pdf and b/docs/pages/Bloque3/MARef.pdf differ diff --git a/docs/pages/Bloque3/MAcss2.html b/docs/pages/Bloque3/MAcss2.html index 3813978..cb60c86 100644 --- a/docs/pages/Bloque3/MAcss2.html +++ b/docs/pages/Bloque3/MAcss2.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -593,7 +617,7 @@

    MA: CSS Flex y CSS

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque3/MAcss2.pdf b/docs/pages/Bloque3/MAcss2.pdf index a7cdbe1..d8b53c8 100644 Binary files a/docs/pages/Bloque3/MAcss2.pdf and b/docs/pages/Bloque3/MAcss2.pdf differ diff --git a/docs/pages/Bloque3/MAentorno.html b/docs/pages/Bloque3/MAentorno.html index 881b6c8..51788cb 100644 --- a/docs/pages/Bloque3/MAentorno.html +++ b/docs/pages/Bloque3/MAentorno.html @@ -280,7 +280,7 @@

    MA: Entorno

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque3/MAentorno.pdf b/docs/pages/Bloque3/MAentorno.pdf index c2a2cdf..a485f0d 100644 Binary files a/docs/pages/Bloque3/MAentorno.pdf and b/docs/pages/Bloque3/MAentorno.pdf differ diff --git a/docs/pages/Bloque3/ReactI.html b/docs/pages/Bloque3/ReactI.html index 2aad1bf..1d5137b 100644 --- a/docs/pages/Bloque3/ReactI.html +++ b/docs/pages/Bloque3/ReactI.html @@ -579,8 +579,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -675,7 +699,7 @@

    React I

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque3/ReactI.pdf b/docs/pages/Bloque3/ReactI.pdf index 0187932..6337856 100644 Binary files a/docs/pages/Bloque3/ReactI.pdf and b/docs/pages/Bloque3/ReactI.pdf differ diff --git a/docs/pages/Bloque3/ReactIV.html b/docs/pages/Bloque3/ReactIV.html index cf59008..b661f8f 100644 --- a/docs/pages/Bloque3/ReactIV.html +++ b/docs/pages/Bloque3/ReactIV.html @@ -1,87 +1,176 @@ - + - - + - + + - + -React IV – Training Center SW - + + + React IV – Training Center SW + + + + + + + + + + + + + + + + + + + + + + + + + + - + - -
    +
    -
    - -
    - - + + +
    + +
    • -
  • -
    - - -
    - -
    • +
    + + Bloque III Interacción + + + +
    + + +
  • + Próximamente... +
    • + >>>>>>> 8e10774 (feat: explicacion semana 10 (#4)) + +
  • -
    - - Bloque III Interacción - - - -
    - - -
    • -
  • -
    - - Semana 10 - - - +
    +
    +




    © Javier Ribal del Río
    2025 + - Hyperloop UPV

    +
    - -
    • -======= - - -
  • - Próximamente... -
    • ->>>>>>> 8e10774 (feat: explicacion semana 10 (#4)) - - -
  • - - Bloque IV Comunicación -
    • -
  • -
    - - Rúbrica de evaluación -
    -
    • - - -
    -




    © Javier Ribal del Río
    2025 - Hyperloop UPV

    -
    -
    - + +
    + - -
    + +
    -
    -
    -

    React IV

    -

    Ecosistema npm, React Router, useContext

    -
    +
    + +
    +

    React IV

    +

    Ecosistema npm, React Router, useContext

    +
    -
    +
    -
    -
    Autor/a
    -
    -

    Javier Ribal del Río

    +
    +
    Autor/a
    +
    +

    Javier Ribal del Río

    +
    -
    - -
    -
    Fecha de publicación
    -
    -

    6 de marzo de 2026

    -
    -
    - -
    -
    Fecha de última modificación
    -
    -<<<<<<< HEAD -

    7 de marzo de 2026

    -======= -

    4 de marzo de 2026

    ->>>>>>> 8e10774 (feat: explicacion semana 10 (#4)) -
    -
    - -
    - + +
    +
    Fecha de publicación
    +
    +

    6 de marzo de 2026

    +
    +
    + +
    +
    Fecha de última modificación
    +
    + <<<<<<< HEAD

    7 de marzo de 2026

    + ======= +

    4 de marzo de 2026

    + >>>>>>> 8e10774 (feat: explicacion semana 10 (#4)) +
    +
    + +
    -
    +
    -

    Contenido

    - -
    -

    Ecosistema Node

    -

    Hasta ahora hemos trabajado únicamente con React y JavaScript.

    -

    Sin embargo, en el desarrollo real de aplicaciones es muy común utilizar librerías externas, para ello podemos recurrir Node.JS.

    -

    React está diseñado para funcionar dentro de un ecosistema de paquetes.

    -

    Ejemplos habituales:

    -
      -
    • React Router → navegación
      • -
    • Axios → peticiones HTTP
      • -
    • Chart.js → gráficas
      • -
    • Zustand / Redux → gestión de estado
      • -
    • Librerías de UI: Tailwind, Bootstrap, Booswatch
      • -
    -
    -
    -

    npm

    -

    npm (Node Package Manager) es el sistema que permite instalar y gestionar librerías de JavaScript. Como su nombre indica, está desarrollado por Node.JS

    -

    Cada proyecto tiene un archivo:

    -
    package.json
    -

    En este archivo se registran las dependencias del proyecto.

    -

    Ejemplo:

    -
    {
+
+      
    Contenido
    
+      
      
+        
    • Ecosistema React y paquetes npm
      • 
+        
    • Librerías externas
      • 
+        
    • React Router
      • 
+        
    • Parámetros de URL
      • 
+        
    • useContext
      • 
+      
    
+      
    
+        
    Ecosistema Node
    
+        
    Hasta ahora hemos trabajado únicamente con React y JavaScript.
    
+        
    Sin embargo, en el desarrollo real de aplicaciones es muy común utilizar librerías externas,
+          para ello podemos recurrir Node.JS.
    
+        
    React está diseñado para funcionar dentro de un ecosistema de paquetes.
    
+        
    Ejemplos habituales:
    
+        
      
+          
    • React Router → navegación
      • 
+          
    • Axios → peticiones HTTP
      • 
+          
    • Chart.js → gráficas
      • 
+          
    • Zustand / Redux → gestión de estado
      • 
+          
    • Librerías de UI: Tailwind, Bootstrap, Booswatch
      • 
+        
    
+      
    
+      
    
+        
    npm
    
+        
    npm (Node Package Manager) es el sistema que permite instalar y gestionar librerías de
+          JavaScript. Como su nombre indica, está desarrollado por Node.JS
    
+        
    Cada proyecto tiene un archivo:
    
+        
    package.json
    
+        
    En este archivo se registran las dependencias del proyecto.
    
+        
    Ejemplo:
    
+        
    
+          
    
+            
    {
   "dependencies": {
     "react": "^18.0.0",
     "react-router-dom": "^6.0.0"
   }
-}
    
-
    
-
    Instalación de paquetes
    
-
    Las librerías se instalan desde la terminal.
    
-
    npm install react-router-dom
    
-
    Esto hace tres cosas:
    
-
      
-
    1. Descarga el paquete
      2. 
-
    2. Lo guarda en node_modules (capreta donde se guardan las librerías externas)
      3. 
-
    3. Añade la dependencia en package.json
      4. 
-
    
-
    
-
    
-
    
-
    React Router
    
-
    En una aplicación web tradicional cada enlace carga una página nueva.
    
-
    En React normalmente trabajamos con Single Page Applications (SPA).
    
-
    En una SPA:
    
-
      
-
    • el navegador no recarga la página
      • 
-
    • React cambia los componentes que se muestran
      • 
-
    
-
    Para gestionar esto utilizamos React Router.
    
-
    Realmente es la misma página, solo que el usuario lo percibe como distintas páginas
    
-
    El usuario percibirá que el sitio web está divido en diferentes subpáginas
    
-
      
-
    • /
      • 
-
    • pokemons
      • 
-
    • pokemons/pikachu
      • 
-
    
-
    
-
    Componentes principales de React Router
    
-
    Los elementos fundamentales son:
    
-
      
-
    • BrowserRouter
      • 
-
    • Routes
      • 
-
    • Route
      • 
-
    • Link
      • 
-
    
-
    Ejemplo básico:
    
-
    import { BrowserRouter, Routes, Route } from "react-router-dom";
+}
    
+          
    
+        
    
+        
    
+          
    Instalación de paquetes
    
+          
    Las librerías se instalan desde la terminal.
    
+          
    
+            
    
+              
    npm install react-router-dom
    
+            
    
+          
    
+          
    Esto hace tres cosas:
    
+          
      
+            
    1. Descarga el paquete
      2. 
+            
    2. Lo guarda en node_modules (capreta donde se guardan las librerías externas)
      3. 
+            
    3. Añade la dependencia en package.json
      4. 
+          
    
+        
    
+      
    
+      
    
+        
    React Router
    
+        
    En una aplicación web tradicional cada enlace carga una página nueva.
    
+        
    En React normalmente trabajamos con Single Page Applications (SPA).
    
+        
    En una SPA:
    
+        
      
+          
    • el navegador no recarga la página
      • 
+          
    • React cambia los componentes que se muestran
      • 
+        
    
+        
    Para gestionar esto utilizamos React Router.
    
+        
    Realmente es la misma página, solo que el usuario lo percibe como distintas páginas
    
+        
    El usuario percibirá que el sitio web está divido en diferentes subpáginas
    
+        
      
+          
    • /
      • 
+          
    • pokemons
      • 
+          
    • pokemons/pikachu
      • 
+        
    
+        
    
+          
    Componentes principales de React
+            Router
    
+          
    Los elementos fundamentales son:
    
+          
      
+            
    • BrowserRouter
      • 
+            
    • Routes
      • 
+            
    • Route
      • 
+            
    • Link
      • 
+          
    
+          
    Ejemplo básico:
    
+          
    
+            
    
+              
    import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 function App() {
   return (
@@ -760,54 +976,70 @@ 
    Co
 
     </BrowserRouter>
   );
-}
    
-
    Elementos del código
    
-
      
-
    • BrowserRouter
      
-Es el componente que activa el sistema de navegación de React Router. Utiliza la API de historial del navegador para cambiar la URL sin recargar la página.
      • 
-
    • Routes
      
-Es el contenedor donde se definen todas las rutas de la aplicación. React Router examina las rutas dentro de este componente para decidir qué componente mostrar.
      • 
-
    • Route
      
-Define una ruta concreta de la aplicación.
      • 
-
    
-
      
-
    • path
      
-Indica la URL que activa la ruta.
      
-Ejemplo: / corresponde a la página principal.
      • 
-
    • element
      
-Es el componente de React que se renderiza cuando la URL coincide con el path.
      • 
-
    • <Home />
      
-Componente que se muestra cuando el usuario accede a la ruta /.
      • 
-
    • <PokemonList />
      
-Componente que se muestra cuando el usuario accede a la ruta /pokemons.
      • 
-
    
-
    
-
+        
-
    
-
    Parámetros dinámicos
    
-
    Podemos crear rutas dinámicas.
    
-
    Ejemplo:
    
-
    /pokemon/25
+<Link to="/pokemon">Pokemon</Link>
    
+
    +
    +

    A diferencia de <a>:

    +
      +
    • no recarga la página
      • +
    • React cambia el componente visible
      • +
    +
    +
    +

    Parámetros dinámicos

    +

    Podemos crear rutas dinámicas.

    +

    Ejemplo:

    + 
    /pokemon/25
 /pokemon/7
    -

    Definición de la ruta:

    -
    <Route path="/pokemon/:id" element={<PokemonDetail />} />
    -
    -

    useParams

    -

    Para acceder al parámetro utilizamos el hook useParams de React Router.

    -
    import { useParams } from "react-router-dom";
+          
    Definición de la ruta:
    
+          
    
+            
    
+              
    <Route path="/pokemon/:id" element={<PokemonDetail />} />
    
+            
    
+          
    
+          
    
+            
    useParams
    
+            
    Para acceder al parámetro utilizamos el hook useParams de React Router.
    
+            
    
+              
    
+                
    import { useParams } from "react-router-dom";
 
 function PokemonDetail() {
 
@@ -815,68 +1047,88 @@ 
    useParams
    
 
   return <p>Pokemon {id}</p>;
 
-}
    
-
    Este parámetro puede utilizarse para realizar peticiones a una API.
    
-
    
-
    -
    -
    -

    Context API

    -

    En aplicaciones grandes aparece un problema frecuente.

    -

    Muchos componentes necesitan acceder a la misma información.

    -

    Por ejemplo:

    -
      -
    • usuario
      • -
    • tema visual
      • -
    • idioma
      • -
    • configuración
      • -
    -

    Si pasamos la información mediante props, los datos deben atravesar muchos componentes.

    -

    Representación conceptual:

    -
    App
+}
    + + +

    Este parámetro puede utilizarse para realizar peticiones a una API.

    +
    + + +
    +

    Context API

    +

    En aplicaciones grandes aparece un problema frecuente.

    +

    Muchos componentes necesitan acceder a la misma información.

    +

    Por ejemplo:

    +
      +
    • usuario
      • +
    • tema visual
      • +
    • idioma
      • +
    • configuración
      • +
    +

    Si pasamos la información mediante props, los datos deben atravesar muchos componentes.

    +

    Representación conceptual:

    + 
    App
  └ Layout
     └ Page
        └ Component
    -

    Si todos necesitan user, debemos pasar la prop continuamente.

    -

    Este problema se conoce como prop drilling.

    -
    -

    Context

    -

    React proporciona una solución llamada Context.

    -

    Context permite compartir información entre múltiples componentes sin pasar props manualmente.

    -

    El proceso tiene tres pasos:

    -
      -
    1. Crear el contexto
      2. -
    2. Proveer el contexto
      3. -
    3. Consumir el contexto
      4. -
    -
    -

    Crear un contexto

    -
    import { createContext } from "react";
+        
    Si todos necesitan user, debemos pasar la prop continuamente.
    
+        
    Este problema se conoce como prop drilling.
    
+        
    
+          
    Context
    
+          
    React proporciona una solución llamada Context.
    
+          
    Context permite compartir información entre múltiples componentes sin pasar props
+            manualmente.
    
+          
    El proceso tiene tres pasos:
    
+          
      
+            
    1. Crear el contexto
      2. 
+            
    2. Proveer el contexto
      3. 
+            
    3. Consumir el contexto
      4. 
+          
    
+          
    
+            
    Crear un contexto
    
+            
    
+              
    
+                
    import { createContext } from "react";
 
-const UserContext = createContext();
    
-
    Esto crea un contenedor que puede almacenar información compartida.
    
-
    
-
    
-
    Provider
    
-
    El Provider permite que los componentes hijos accedan al contexto.
    
-
    <UserContext.Provider value={user}>
+const UserContext = createContext();
    
+              
    
+            
    
+            
    Esto crea un contenedor que puede almacenar información compartida.
    
+          
    
+          
    
+            
    Provider
    
+            
    El Provider permite que los componentes hijos accedan al contexto.
    
+            
    
+              
    
+                
    <UserContext.Provider value={user}>
 
   <App />
 
-</UserContext.Provider>
    
-
    Todos los componentes dentro del Provider pueden acceder al valor.
    
-
    
-
    
-
    Consumir el contexto
    
-
    Para acceder al contexto utilizamos el hook useContext.
    
-
    import { useContext } from "react";
+</UserContext.Provider>
    
+              
    
+            
    
+            
    Todos los componentes dentro del Provider pueden acceder al valor.
    
+          
    
+          
    
+            
    Consumir el contexto
    
+            
    Para acceder al contexto utilizamos el hook useContext.
    
+            
    
+              
    
+                
    import { useContext } from "react";
 
-const user = useContext(UserContext);
    
-
    El componente obtiene directamente el valor almacenado en el contexto.
    
-
    
-
    
-
    Ejemplo completo
    
-
    import { createContext, useContext } from "react";
+const user = useContext(UserContext);
    
+              
    
+            
    
+            
    El componente obtiene directamente el valor almacenado en el contexto.
    
+          
    
+          
    
+            
    Ejemplo completo
    
+            
    
+              
    
+                
    import { createContext, useContext } from "react";
 
 const UserContext = createContext();
 
@@ -901,279 +1153,283 @@ 
    Ejemplo completo
    
 
   return <h1>{user.name}</h1>;
 
-}
    
+}
    +
    +
    -
    -
    -
    + + + -
    - - + } else { + return undefined; + } + }; + var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]'); + for (var i = 0; i < bibliorefs.length; i++) { + const ref = bibliorefs[i]; + const citeInfo = findCites(ref); + if (citeInfo) { + tippyHover(citeInfo.el, function () { + var popup = window.document.createElement('div'); + citeInfo.cites.forEach(function (cite) { + var citeDiv = window.document.createElement('div'); + citeDiv.classList.add('hanging-indent'); + citeDiv.classList.add('csl-entry'); + var biblioDiv = window.document.getElementById('ref-' + cite); + if (biblioDiv) { + citeDiv.innerHTML = biblioDiv.innerHTML; + } + popup.appendChild(citeDiv); + }); + return popup.innerHTML; + }); + } + } + }); + + + + - \ No newline at end of file + \ No newline at end of file diff --git a/docs/pages/Bloque3/ReactIV.pdf b/docs/pages/Bloque3/ReactIV.pdf index 5cc2d46..bbe3f73 100644 Binary files a/docs/pages/Bloque3/ReactIV.pdf and b/docs/pages/Bloque3/ReactIV.pdf differ diff --git a/docs/pages/Bloque3/ps.html b/docs/pages/Bloque3/ps.html index 5fab2a4..0677f46 100644 --- a/docs/pages/Bloque3/ps.html +++ b/docs/pages/Bloque3/ps.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -604,7 +628,7 @@

    Proyecto Subsistema

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque3/ps.pdf b/docs/pages/Bloque3/ps.pdf index d3f26df..11610f8 100644 Binary files a/docs/pages/Bloque3/ps.pdf and b/docs/pages/Bloque3/ps.pdf differ diff --git a/docs/pages/Bloque3/t10.html b/docs/pages/Bloque3/t10.html index ccb2468..26b436b 100644 --- a/docs/pages/Bloque3/t10.html +++ b/docs/pages/Bloque3/t10.html @@ -568,8 +568,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -637,7 +661,7 @@

    T10: Quiz app!

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque3/t10.pdf b/docs/pages/Bloque3/t10.pdf index 99257eb..386fe53 100644 Binary files a/docs/pages/Bloque3/t10.pdf and b/docs/pages/Bloque3/t10.pdf differ diff --git a/docs/pages/Bloque3/t6.html b/docs/pages/Bloque3/t6.html index 5449367..4159e59 100644 --- a/docs/pages/Bloque3/t6.html +++ b/docs/pages/Bloque3/t6.html @@ -579,8 +579,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -661,7 +685,7 @@

    T6: Romancero Gitano I

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/pages/Bloque3/t6.pdf b/docs/pages/Bloque3/t6.pdf index bd2d896..afe987e 100644 Binary files a/docs/pages/Bloque3/t6.pdf and b/docs/pages/Bloque3/t6.pdf differ diff --git a/docs/pages/Bloque4/Protocolos.html b/docs/pages/Bloque4/Protocolos.html new file mode 100644 index 0000000..37aae4c --- /dev/null +++ b/docs/pages/Bloque4/Protocolos.html @@ -0,0 +1,970 @@ + + + + + + + + + + + + + + Training Center SW – Protocolos de Comunicación + + + + + + + + + + + + + + + + +
    +
    + +
    +

    Protocolos de Comunicación

    +

    HTTP, WebSockets, Hooks personalizados y Recharts

    + +
    +
    +
    +Javier Ribal del Río +
    +
    +
    + +

    2026-03-13

    +
    +
    + +

    Contenido

    +
      +
    • HTTP básico para desarrollo web
      • +
    • Métodos GET, POST, PUT, DELETE, HEAD
      • +
    • WebSockets
      • +
    • Hook personalizado para conexión en tiempo real
      • +
    • Gráficas con Recharts
      • +
    +
    +
    +

    HTTP

    +

    ¿Qué es HTTP?

    +

    HTTP (HyperText Transfer Protocol) es el protocolo fundamental de la web.

    +

    Define cómo:

    +
      +
    • El cliente (navegador o app)
      • +
    • Solicita recursos
      • +
    • A un servidor
      • +
    +
    +
    + +

    Modelo conceptual:

    +
    Cliente → Solicitud HTTP → Servidor
+Cliente ← Respuesta HTTP ← Servidor
    +

    HTTP es sin estado (stateless).

    +

    Cada petición es independiente.

    +
    +
    + +

    Componentes de una petición

    +

    Una petición HTTP contiene:

    +
      +
    • Método
      • +
    • URL
      • +
    • Cabeceras (headers)
      • +
    • Cuerpo (body, opcional)
      • +
    +

    Ejemplo conceptual:

    +
    GET /users HTTP/1.1
+Host: api.example.com
+Authorization: Bearer token
    +
    +
    + +

    Métodos HTTP principales

    +

    GET

    +
      +
    • Solicita datos
      • +
    • No modifica el servidor
      • +
    • Debe ser idempotente
      • +
    +

    Ejemplo:

    +
    GET /users
    +
    +
    + +

    Uso típico en React:

    +
    fetch("/api/users")
    +
    +
    + +

    POST

    +
      +
    • Envía datos al servidor
      • +
    • Crea recursos nuevos
      • +
    • Tiene cuerpo
      • +
    +
    +
    + +

    Ejemplo:

    +
    fetch("/api/users", {
+  method: "POST",
+  body: JSON.stringify({ name: "Ana" }),
+  headers: { "Content-Type": "application/json" }
+});
    +
    +
    + +

    PUT

    +
      +
    • Actualiza completamente un recurso existente
      • +
    • Idempotente
      • +
    +
    PUT /users/3
    +
    +
    + +

    DELETE

    +
      +
    • Elimina un recurso
      • +
    +
    DELETE /users/3
    +
    +
    + + +
      +
    • Igual que GET
      • +
    • No devuelve cuerpo
      • +
    • Solo cabeceras
      • +
    +

    Se utiliza para:

    +
      +
    • Comprobar existencia
      • +
    • Tamaño
      • +
    • Metadatos
      • +
    +
    +
    +

    HTTP vs Comunicación en tiempo real

    +

    HTTP funciona bajo el modelo:

    +
    +

    Petición → Respuesta → Fin

    +
    +

    Si queremos datos continuamente:

    +
      +
    • Debemos repetir peticiones
      • +
    • Introduce latencia
      • +
    • Ineficiente
      • +
    +

    Solución: WebSockets

    +
    +
    +

    WebSockets

    +

    WebSockets permiten comunicación bidireccional persistente.

    +

    Características:

    +
      +
    • Conexión permanente
      • +
    • Cliente y servidor pueden enviar datos
      • +
    • Baja latencia
      • +
    • Ideal para tiempo real
      • +
    +
    +
    + +

    Ejemplos:

    +
      +
    • Chats
      • +
    • Juegos online
      • +
    • Telemetría
      • +
    • Trading
      • +
    • Sistemas IoT
      • +
    +
    +
    + +

    Flujo conceptual

    +
    Cliente ↔ Servidor
+     conexión abierta
    +

    No se crea una nueva conexión por mensaje.

    +
    +
    + +

    Creación de un WebSocket en JavaScript

    +
    const socket = new WebSocket("ws://localhost:8080");
    +

    Eventos principales:

    +
      +
    • onopen
      • +
    • onmessage
      • +
    • onclose
      • +
    • onerror
      • +
    +
    +
    + +

    Recepción de mensajes

    +
    socket.onmessage = (event) => {
+  console.log("Mensaje:", event.data);
+};
    +
    +
    + +

    Envío de mensajes

    +
    socket.send("Hola servidor");
    +
    +
    +

    Hook Personalizado

    +

    Si usamos WebSockets directamente dentro del componente:

    +
      +
    • Mezclamos lógica de conexión con renderizado
      • +
    • Código difícil de reutilizar
      • +
    • Problemas de ciclo de vida
      • +
    +

    Solución: Hook personalizado

    +
    +
    + +

    Hook personalizado

    +

    Un hook personalizado es:

    +
    +

    Una función que utiliza hooks internos para encapsular lógica reutilizable

    +
    +

    Convención:

    +
    useNombre()
    +
    +
    + +

    Hook useWebSocket

    +
    import { useEffect, useState } from "react";
+
+export function useWebSocket(url) {
+
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+
+    const socket = new WebSocket(url);
+
+    socket.onmessage = (event) => {
+      setData(event.data);
+    };
+
+    return () => socket.close();
+
+  }, [url]);
+
+  return data;
+}
    +
    +
    + +

    Análisis conceptual

    +
      +
    • Se crea la conexión al montar
      • +
    • Se actualiza el estado al recibir datos
      • +
    • Se cierra al desmontar
      • +
    • El componente solo consume datos
      • +
    +
    +
    + +

    Uso del hook

    +
    function Monitor() {
+
+  const data = useWebSocket("ws://localhost:8080");
+
+  return (
+    <div>
+      <h2>Datos en tiempo real</h2>
+      <p>{data}</p>
+    </div>
+  );
+}
    +
    +
    + +

    Flujo:

    +
      +
    1. Componente se renderiza
      +
      2. +
    2. Hook abre conexión
      +
      3. +
    3. Llegan datos
      +
      4. +
    4. Estado cambia
      +
      5. +
    5. Nuevo render
      6. +
    +
    +
    +

    Visualización de datos

    +

    En aplicaciones reales no basta con mostrar texto.

    +

    Necesitamos:

    +
      +
    • Gráficas
      • +
    • Paneles de control
      • +
    • Visualización clara
      • +
    +

    Una librería popular para React es Recharts.

    +
    +
    +

    Recharts

    +

    Recharts es una librería basada en:

    +
      +
    • Componentes React
      • +
    • SVG
      • +
    • Composición declarativa
      • +
    +

    Instalación:

    +
    npm install recharts
    +
    +
    + +

    Ejemplo básico

    +
    import {
+  LineChart, Line, XAxis, YAxis,
+  CartesianGrid, Tooltip
+} from "recharts";
+
+const data = [
+  { t: 1, v: 10 },
+  { t: 2, v: 15 },
+  { t: 3, v: 8 }
+];
+
+function Grafica() {
+  return (
+    <LineChart width={400} height={300} data={data}>
+      <CartesianGrid stroke="#ccc" />
+      <XAxis dataKey="t" />
+      <YAxis />
+      <Tooltip />
+      <Line type="monotone" dataKey="v" stroke="#8884d8" />
+    </LineChart>
+  );
+}
    +
    +
    + +

    Interpretación

    +

    Cada objeto representa un punto.

    +
    { t: 1, v: 10 }
    +
      +
    • t → eje X
      • +
    • v → eje Y
      • +
    +
    +
    +

    Integración completa

    +

    WebSocket + Hook + Recharts

    +

    Objetivo:

    +
    +

    Visualizar datos en tiempo real

    +
    +
    +
    + +

    Ejemplo conceptual

    +
    function Dashboard() {
+
+  const data = useWebSocket("ws://localhost:8080");
+
+  const chartData = data
+    ? JSON.parse(data)
+    : [];
+
+  return (
+    <LineChart width={500} height={300} data={chartData}>
+      <XAxis dataKey="time" />
+      <YAxis />
+      <Tooltip />
+      <Line dataKey="value" stroke="#82ca9d" />
+    </LineChart>
+  );
+}
    +
    +
    + +

    Flujo completo de una app moderna

    +
    Servidor → WebSocket → Hook → Estado → React → Gráfica
    +

    Arquitectura típica de sistemas en tiempo real.

    +
    +
    +

    Material

    +

    Servidor de testing de Python: Enlace.

    +

    Instalar websockets con pip install websockets

    +

    Tester de prueba: Enlace (click derecho guardar enlace como)

    +

    https://recharts.github.io/

    + + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/pages/Bloque4/Server.py b/docs/pages/Bloque4/Server.py new file mode 100644 index 0000000..fdd1099 --- /dev/null +++ b/docs/pages/Bloque4/Server.py @@ -0,0 +1,123 @@ +import asyncio +import json +import random +import threading +from http.server import BaseHTTPRequestHandler, HTTPServer +from datetime import datetime + +import websockets + + +# ========================================================= +# HTTP SERVER — PORT 3001 +# ========================================================= + +class TestHandler(BaseHTTPRequestHandler): + + # ----------- CORS HEADERS ----------- + + def _set_cors_headers(self): + self.send_header("Access-Control-Allow-Origin", "*") + self.send_header("Access-Control-Allow-Methods", "GET, POST, OPTIONS") + self.send_header("Access-Control-Allow-Headers", "Content-Type") + + # ----------- OPTIONS (PRE-FLIGHT) ----------- + + def do_OPTIONS(self): + self.send_response(200) + self._set_cors_headers() + self.end_headers() + + # ----------- COMMON HANDLER ----------- + + def _handle_request(self): + content_length = int(self.headers.get('Content-Length', 0)) + body = self.rfile.read(content_length) if content_length > 0 else b'' + + print("\n==============================") + print("HTTP REQUEST RECEIVED") + print("Method:", self.command) + print("Path:", self.path) + print("Headers:", dict(self.headers)) + print("Body:", body.decode(errors="ignore")) + print("==============================\n") + + self.send_response(200) + self._set_cors_headers() + self.send_header("Content-Type", "text/plain") + self.end_headers() + + self.wfile.write(b"OK") + + def do_GET(self): + self._handle_request() + + def do_POST(self): + self._handle_request() + + def log_message(self, format, *args): + return + + +def run_http_server(): + server = HTTPServer(("0.0.0.0", 3001), TestHandler) + print("HTTP server listening on port 3001") + server.serve_forever() + + +# ========================================================= +# WEBSOCKET SERVER — PORT 3002 +# ========================================================= + +async def ws_handler(websocket): + print("WebSocket client connected") + + data_buffer = [] + + try: + while True: + value = random.uniform(0, 100) + + data_buffer.append({ + "time": datetime.now().strftime("%H:%M:%S"), + "value": value + }) + + data_buffer = data_buffer[-20:] + + await websocket.send(json.dumps(data_buffer)) + await asyncio.sleep(1) + + except websockets.exceptions.ConnectionClosedOK: + print("Client disconnected normally") + + except websockets.exceptions.ConnectionClosedError: + print("Client disconnected with error") + + +async def run_ws_server(): + print("WebSocket server listening on port 3002") + + async with websockets.serve( + ws_handler, + "0.0.0.0", + 3002 + ): + await asyncio.Future() + + +# ========================================================= +# MAIN +# ========================================================= + +if __name__ == "__main__": + + print("\n=== TEST SERVER STARTING ===") + + http_thread = threading.Thread( + target=run_http_server, + daemon=True + ) + http_thread.start() + + asyncio.run(run_ws_server()) \ No newline at end of file diff --git a/docs/pages/Bloque4/protocolos.html b/docs/pages/Bloque4/protocolos.html new file mode 100644 index 0000000..c7f338a --- /dev/null +++ b/docs/pages/Bloque4/protocolos.html @@ -0,0 +1,1454 @@ + + + + + + + + + + +Protocolos de Comunicación – Training Center SW + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + +
    + +
    + + +
    + + + +
    + + +
    +
    +

    Protocolos de Comunicación

    +

    HTTP, WebSockets, Hooks personalizados y Recharts

    +
    + + + +
    + +
    +
    Autor/a
    +
    +

    Javier Ribal del Río

    +
    +
    + +
    +
    Fecha de publicación
    +
    +

    13 de marzo de 2026

    +
    +
    + +
    +
    Fecha de última modificación
    +
    +

    13 de marzo de 2026

    +
    +
    + +
    + + + +
    + + +

    Contenido

    +
      +
    • HTTP básico para desarrollo web
      • +
    • Métodos GET, POST, PUT, DELETE, HEAD
      • +
    • WebSockets
      • +
    • Hook personalizado para conexión en tiempo real
      • +
    • Gráficas con Recharts
      • +
    +
    +

    HTTP

    +
    +

    ¿Qué es HTTP?

    +

    HTTP (HyperText Transfer Protocol) es el protocolo fundamental de la web.

    +

    Define cómo:

    +
      +
    • El cliente (navegador o app)
      • +
    • Solicita recursos
      • +
    • A un servidor
      • +
    +

    Modelo conceptual:

    +
    Cliente → Solicitud HTTP → Servidor
+Cliente ← Respuesta HTTP ← Servidor
    +

    HTTP es sin estado (stateless).

    +

    Cada petición es independiente.

    +
    +
    +

    Componentes de una petición

    +

    Una petición HTTP contiene:

    +
      +
    • Método
      • +
    • URL
      • +
    • Cabeceras (headers)
      • +
    • Cuerpo (body, opcional)
      • +
    +

    Ejemplo conceptual:

    +
    GET /users HTTP/1.1
+Host: api.example.com
+Authorization: Bearer token
    +
    +
    +

    Métodos HTTP principales

    +
    +

    GET

    +
      +
    • Solicita datos
      • +
    • No modifica el servidor
      • +
    • Debe ser idempotente
      • +
    +

    Ejemplo:

    +
    GET /users
    +

    Uso típico en React:

    +
    fetch("/api/users")
    +
    +
    +
    +

    POST

    +
      +
    • Envía datos al servidor
      • +
    • Crea recursos nuevos
      • +
    • Tiene cuerpo
      • +
    +

    Ejemplo:

    +
    fetch("/api/users", {
+  method: "POST",
+  body: JSON.stringify({ name: "Ana" }),
+  headers: { "Content-Type": "application/json" }
+});
    +
    +
    +

    PUT

    +
      +
    • Actualiza completamente un recurso existente
      • +
    • Idempotente
      • +
    +
    PUT /users/3
    +
    +
    +

    DELETE

    +
      +
    • Elimina un recurso
      • +
    +
    DELETE /users/3
    +
    + +
    +
    +

    HTTP vs Comunicación en tiempo real

    +

    HTTP funciona bajo el modelo:

    +
    +

    Petición → Respuesta → Fin

    +
    +

    Si queremos datos continuamente:

    +
      +
    • Debemos repetir peticiones
      • +
    • Introduce latencia
      • +
    • Ineficiente
      • +
    +

    Solución: WebSockets

    +
    +
    +

    WebSockets

    +

    WebSockets permiten comunicación bidireccional persistente.

    +

    Características:

    +
      +
    • Conexión permanente
      • +
    • Cliente y servidor pueden enviar datos
      • +
    • Baja latencia
      • +
    • Ideal para tiempo real
      • +
    +

    Ejemplos:

    +
      +
    • Chats
      • +
    • Juegos online
      • +
    • Telemetría
      • +
    • Trading
      • +
    • Sistemas IoT
      • +
    +
    +

    Flujo conceptual

    +
    Cliente ↔ Servidor
+     conexión abierta
    +

    No se crea una nueva conexión por mensaje.

    +
    +
    +

    Creación de un WebSocket en JavaScript

    +
    const socket = new WebSocket("ws://localhost:8080");
    +

    Eventos principales:

    +
      +
    • onopen
      • +
    • onmessage
      • +
    • onclose
      • +
    • onerror
      • +
    +
    +
    +

    Recepción de mensajes

    +
    socket.onmessage = (event) => {
+  console.log("Mensaje:", event.data);
+};
    +
    +
    +

    Envío de mensajes

    +
    socket.send("Hola servidor");
    +
    +
    +
    +

    Hook Personalizado

    +

    Si usamos WebSockets directamente dentro del componente:

    +
      +
    • Mezclamos lógica de conexión con renderizado
      • +
    • Código difícil de reutilizar
      • +
    • Problemas de ciclo de vida
      • +
    +

    Solución: Hook personalizado

    +
    +

    Hook personalizado

    +

    Un hook personalizado es:

    +
    +

    Una función que utiliza hooks internos para encapsular lógica reutilizable

    +
    +

    Convención:

    +
    useNombre()
    +
    +
    +

    Hook useWebSocket

    +
    import { useEffect, useState } from "react";
+
+export function useWebSocket(url) {
+
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+
+    const socket = new WebSocket(url);
+
+    socket.onmessage = (event) => {
+      setData(event.data);
+    };
+
+    return () => socket.close();
+
+  }, [url]);
+
+  return data;
+}
    +
    +
    +

    Análisis conceptual

    +
      +
    • Se crea la conexión al montar
      • +
    • Se actualiza el estado al recibir datos
      • +
    • Se cierra al desmontar
      • +
    • El componente solo consume datos
      • +
    +
    +
    +

    Uso del hook

    +
    function Monitor() {
+
+  const data = useWebSocket("ws://localhost:8080");
+
+  return (
+    <div>
+      <h2>Datos en tiempo real</h2>
+      <p>{data}</p>
+    </div>
+  );
+}
    +

    Flujo:

    +
      +
    1. Componente se renderiza
      +
      2. +
    2. Hook abre conexión
      +
      3. +
    3. Llegan datos
      +
      4. +
    4. Estado cambia
      +
      5. +
    5. Nuevo render
      6. +
    +
    +
    +
    +

    Visualización de datos

    +

    En aplicaciones reales no basta con mostrar texto.

    +

    Necesitamos:

    +
      +
    • Gráficas
      • +
    • Paneles de control
      • +
    • Visualización clara
      • +
    +

    Una librería popular para React es Recharts.

    +
    +
    +

    Recharts

    +

    Recharts es una librería basada en:

    +
      +
    • Componentes React
      • +
    • SVG
      • +
    • Composición declarativa
      • +
    +

    Instalación:

    +
    npm install recharts
    +
    +

    Ejemplo básico

    +
    import {
+  LineChart, Line, XAxis, YAxis,
+  CartesianGrid, Tooltip
+} from "recharts";
+
+const data = [
+  { t: 1, v: 10 },
+  { t: 2, v: 15 },
+  { t: 3, v: 8 }
+];
+
+function Grafica() {
+  return (
+    <LineChart width={400} height={300} data={data}>
+      <CartesianGrid stroke="#ccc" />
+      <XAxis dataKey="t" />
+      <YAxis />
+      <Tooltip />
+      <Line type="monotone" dataKey="v" stroke="#8884d8" />
+    </LineChart>
+  );
+}
    +
    +
    +

    Interpretación

    +

    Cada objeto representa un punto.

    +
    { t: 1, v: 10 }
    +
      +
    • t → eje X
      • +
    • v → eje Y
      • +
    +
    +
    +
    +

    Integración completa

    +

    WebSocket + Hook + Recharts

    +

    Objetivo:

    +
    +

    Visualizar datos en tiempo real

    +
    +
    +

    Ejemplo conceptual

    +
    function Dashboard() {
+
+  const data = useWebSocket("ws://localhost:8080");
+
+  const chartData = data
+    ? JSON.parse(data)
+    : [];
+
+  return (
+    <LineChart width={500} height={300} data={chartData}>
+      <XAxis dataKey="time" />
+      <YAxis />
+      <Tooltip />
+      <Line dataKey="value" stroke="#82ca9d" />
+    </LineChart>
+  );
+}
    +
    +
    +

    Flujo completo de una app moderna

    +
    Servidor → WebSocket → Hook → Estado → React → Gráfica
    +

    Arquitectura típica de sistemas en tiempo real.

    +
    +
    +
    +

    Material

    +

    Servidor de testing de Python: Enlace.

    +

    Instalar websockets con pip install websockets

    +

    Tester de prueba: Enlace (click derecho guardar enlace como)

    +

    https://recharts.github.io/

    + + +
    + +
    + +
    + + + + + \ No newline at end of file diff --git a/docs/pages/Bloque4/protocolos.pdf b/docs/pages/Bloque4/protocolos.pdf new file mode 100644 index 0000000..e6e20ae Binary files /dev/null and b/docs/pages/Bloque4/protocolos.pdf differ diff --git a/docs/pages/Bloque4/tester_http_ws_basic.html b/docs/pages/Bloque4/tester_http_ws_basic.html new file mode 100644 index 0000000..5343719 --- /dev/null +++ b/docs/pages/Bloque4/tester_http_ws_basic.html @@ -0,0 +1,444 @@ + + + + + + Tester HTTP + WebSocket + + + +
    +

    Tester HTTP + WebSocket

    +

    Página básica en HTML y JavaScript para probar tu servidor HTTP en el puerto 3001 y el WebSocket en el puerto 3002.

    + +
    +
    +

    HTTP

    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +

    El body solo se enviará en POST. El servidor debería mostrar por consola el método, la ruta, los headers y el body.

    +
    + +
    +

    Respuesta HTTP

    + Sin petición + 
    Aquí aparecerá la respuesta del servidor.
    +
    + +
    +

    WebSocket

    +
    + + +
    +
    + + + +
    +
    + Desconectado +
    +

    Se espera recibir un JSON con este formato: [{"time":"12:00:00","value":10}, ...]

    +
    + +
    +

    Mensajes WebSocket

    + 
    Aquí aparecerán los mensajes recibidos por WebSocket.
    +
    + +
    +

    Gráfica en tiempo real

    + +

    La gráfica usa los campos time y value del array recibido por WebSocket.

    +
    +
    +
    + + + + diff --git a/docs/pages/rubric.html b/docs/pages/rubric.html index a6dbb7f..5223bf4 100644 --- a/docs/pages/rubric.html +++ b/docs/pages/rubric.html @@ -544,8 +544,32 @@
  • - - Bloque IV Comunicación +
    + + +
    +
  • @@ -593,7 +617,7 @@

    Rúbrica de evaluación

    Fecha de última modificación
    -

    7 de marzo de 2026

    +

    13 de marzo de 2026

    diff --git a/docs/rubriuca.pdf b/docs/rubriuca.pdf index cdc9a14..4e2f4cf 100644 Binary files a/docs/rubriuca.pdf and b/docs/rubriuca.pdf differ diff --git a/docs/search.json b/docs/search.json index a8e7106..8badb3b 100644 --- a/docs/search.json +++ b/docs/search.json @@ -42,22 +42,80 @@ "text": "Evaluación Notas Generales\nEvaluación previa realizada por el profesor antes de la presentación, la podeis leer para valorar vosotros los fallos y calificarlos según vuestro criterio\n\nIvan Martínez Enguix\nPor algún motivo tiene los tamaños de todo muy distorsionado, habrá que preguntarle durante la presentación, seguramente mientras acababa de programar modificaría el zoom de la preview\n\nDiseño Estructural\nEstéticamente está bien, gestiona el espacio de una manera correcta pero mejorable, podría haber puesto un overflow pero en general bastante bien distribuido. Destacar el uso del <footer>.\nEn relación al código en general está bastante bien aunque tiene algunos fallos importantes. Siendo estos algunos de los más destacables.\n\n<div id=\"titulo\"><h1><strong>Lista de tareas</strong></h1></div>\n\nMal uso del <form> y de la etiqueta <label>, (personalmente me sorprende que la aplicación funcione con esto tal y como está)\n <!--Div con los dos campos que rellenar-->\n <div class=\"elflex\">\n\n <!--DOS FORMS???!!!!-->\n <form class=\"losforms\">\n <label for=\"first-name\">Nombre:</label>\n <input type=\"text\" name=\"first-name\" class=\"losforms\" id=\"nomtarea\"/>\n </form>\n\n <!--Desplegable y boton-->\n <form class=\"losforms\">\n <!-- LABEL QUE APUNTA AL BOTÓN DE SUBMTI-->\n <label for=\"elinput\">Responsable: </label>\n <select name=\"Responsable:\" id=\"desplegable\" class=\"losforms\">\n <option value=\"Software\">Software</option>\n <option value=\"Hardware\">Hardware</option>\n <option value=\"Partners\">Partners</option>\n <option value=\"Otros\">Otros</option>\n </select>\n <input type=\"submit\" value=\"Añadir\" id=\"elinput\" class=\"losforms\" />\n </form>\n </div>\nPuntuación: 6.8, aunque el HTML tiene varios errores garrafales la estructura es correcta y el resto del HTML está bastante bien\n\n\nDiseño Formato\nUso muy bueno de las propiedades y de los selectores/pseudoselectores de CSS. Domina funciones avanzadas como el flex, el degradado en el fondo, así como configurar correctamente las propiedades de la foto del pie de sitio.\nUtiliza una buena paleta de colores que incluye el AZUL y el VERDE, colores complementarios siguiendo la teoría de color.\nAbusa del uso de los píxeles como unidades de medida, (aunque en el TC tampoco hemos visto más). Hubiera faltado formatear mejor los botones.\nPor último en relación a la hoja de estilos podría haber agrupados varias propiedades en una única clase y aplicarla indistintamente o haber definido una variable de CSS\nPuntuación: 7.5, muy buen diseño y uso de los selectores cosas mejorables en la hoja de estilos pero en general bien. Obiando lo del zoom está todo correcto\n\n\nFuncionalidad\nIncorpora todas las funcionalidades básicas, sin embargo presenta algunos errores, y bugs críticos:\n\nAñadir dos veces la misma tarea\nAñadir tareas sin especificar texto\nAl presionar el botón de intro en el <input> de la tarea se recarga el sitio web (esto por la mala configuración del formulario)\n\nNo mucho más que añadir.\nPuntuación 5.5: cumple con lo mínimo y presenta muchos bugs\n\n\nProgramación\nCódigo JS correcto, no maneja el DOM de la forma más eficiente, aun así parece que no acaba de comprender el paso de variables de las funiones de ES6.\nAunque el manejo del DOM no es el del todo correcto, lo ha solucionado con de una forma muy creativa jugando con selectores CSS. Aun así presenta código innecesario\n const btn = document.getElementById(\"elinput\");\nconst subsistema = document.getElementById(\"desplegable\");\nconst lista = document.getElementById(\"listado\");\nconst tarea = document.getElementById(\"nomtarea\");\n\n//Recoge la información del campo escrito y desplegable y los enseña por pantalla en la lista de tareas\nbtn.addEventListener(\"click\",(event1)=>{\n\n event1.preventDefault();\n const li = document.createElement(\"li\");\n li.textContent = tarea.value + \" (\" + subsistema.value + \")\";\n // AÑADIR NEGRITA AQUÍ\n lista.appendChild(li);\n tarea.value = null\n});\n\n//Detecta sobre que elemento de la lista estamos haciendo click y lo elimina\nlista.addEventListener(\"click\", function(event2) {\n\n if (event2.target.tagName === \"LI\") {\n event2.target.remove();\n }\n});\n\n// TODO ESTO SOBRA SE PODRÍA AÑADIR NEGRITA DIRECTAMENTE AL LI\n//Cuando se pasa por encima de una tarea \nlista.addEventListener(\"mouseover\", function(event3) {\n\n if (event3.target.tagName === \"LI\") {\n event3.target.classList.add(\"negrita\");\n }\n});\nPuntuación: 7.5: En general bien sería interesante que almacenará las tareas, aunque tal y como lo ha planteado no le hacía falta\n\n\nDocumentación\nHay comentarios en el HTML y en JS, en el CSS no. Tampoco hay documntación, pero ha usado git aunque sus mensajes de log no son los más correctos.\nPuntuación: 7\n\n\nObservaciones\nPor algún motivo hay 3 fotos en la misma carpeta que los ficheros de código (dos paisajes y una fotografía de Shrek [Sí, el ogro verde de dreamworks])\n\n\nPreguntas técnicas\n\nPreguntarle lo que es un flex\nPreguntarle a que se corresponde la variable listado de su código\n\n\n\n\nPau Minguet Micó\nHa hecho dos versiones una con DOM y otra con React, así en general evaluaremos la de React pero hay que destacar que el código JS del DOM está correcto. (Es más correcta la solución de DOM a nivel de programación pero valoaremos la de React más positivamente)\n\nDiseño Estructural\nNo se distingue lo que es HTML de lo que no, lo cual no es malo, distribuye el espacio de forma mediocre aunque no mal del todo.\nEn general está bien no utiliza la etiqueta <header/> para la cabecera y utiliza la propiedad style para introducir estilos con la sintaxis JSX, lo cual según mi criterio no es del todo correcto, sin embargo aquí lo hace dos veces por lo que podría haber introducido una clase.\n <span className=\"item-text\" style={{ textDecoration: checked ? \"line-through\" : \"none\" }}>{item.text}</span>\n <span className=\"item-responsible\" style={{ textDecoration: checked ? \"line-through\" : \"none\" }}>{item.responsible}</span>\nFaltaría añadir un label para el checkbox para que si haces click en el texto se marque la casilla Puntuación:8\n\n\nDiseño Formato\nImpresionante, luce el CSS, aunque hay cosas que no acaban de agradar, el alumno maneja correctamente las propiedades CSS juega perfectamente con los flex y trabaja los efectos y animaciones de forma sencilla, la web es casi responsive. Lo único que no me gusta es que con la imagen de fondo no podemos evaluar su totalment paleta de colores, aun así los colores mostrados son correctos.\nAdemás incorpora iconos y letras importadas de CSS, así como checkbox muy customizadas.\nMe llama especialmente la atención el uso de las propiedades CSS, le preguntaremos mucho sobre esto, hay un par de propiedades muy especificas.\nPuntuación: 9\n\n\nFuncionalidad\nIncorpora todas las funcionalidades básicas, sin embargo presenta algunos errores\n\nAñadir dos veces la misma tarea\n\nIncorpora la posibilidad de marcar una tarea sin eliminarla, así como la posibilidad de editar la tarea, lo cual no es el del todo fácil.\nPuntuación 8: incluye lo mínimo y funcionalidades\n\n\nProgramación\nUtiliza React. Buen diseño de componentes generalmente utiliza correctamente las props y el state (aun no lo hemos visto en el TC) aun así presenta algunos errores de metodología (los cuales serán trabajados en el TC posteriormente).\nEl error más destable es utilizar el DOM, pero bueno lo hace de forma correcta y en susitución de los controlled-inputs (que tampoco los hemos visto en el TC).\nimport ListItem from \"./ListItem\";\nimport EditItem from \"./EditItem\";\nimport { useState } from \"react\";\nimport \"../styles/TaskList.css\";\n\nconst TaskList = ({ items, updateList }) => {\n\n // Stores the index of the task that is being edited\n const [editIndex, setEditIndex] = useState(-1);\n\n // When the user clicks on a task, it will be removed from the list\n const handleClick = item => {\n updateList(items.filter(n => !(n.text === item.text && n.responsible === item.responsible)));\n };\n\n // When the user clicks on the save button in the EditItem component, this function will be called to update the task in the list\n const handleSave = () => {\n const text = document.querySelector(\".edit-text\").value;\n const responsible = document.querySelector(\".edit-select\").value;\n if (text !== \"\") {\n const newItems = [...items];\n newItems[editIndex] = { text, responsible };\n updateList(newItems);\n setEditIndex(-1);\n }\n }\n\n // MUY FEO ESTO\n return (\n <div className=\"task-list\">\n {items.map((item, i) => (\n // Just one of the items will be in edit mode\n editIndex === i ? (\n <EditItem key={i} item={item} onSave={handleSave} onCancel={() => setEditIndex(-1)} />\n ) : (\n <ListItem \n key={i} \n onClick={() => handleClick(item)} \n item={item} \n setEditIndex={setEditIndex} \n pos={i} \n />\n )\n ))}\n </div>\n );\n};\n\nexport default TaskList;\nPuntuación: 9\n\n\nDocumentación\nHay comentarios en JSX pero no en CSS. No hay documentación uso correcto de Git y Git Hub se ha hecho una PR a si mismo, trabaja con ramas y utiliza convenctional commits. No presenta documentación.\nPuntuación 8:\n\n\nEsfuerzo\nMe ha ido enseñando distintas versiones de la web me ha ido preguntando por mi opinión y ha ido haciendo casos de mis sugerencias\n\n\nPreguntas técnicas\n\nPreguntarle lo que es un flex y sus propiedades\nPreguntarle el diagrama de componentes de su app\n\n\n\n\nDaniel Zanón Barney\nTengo dudas respecto a este alumno sus tares han sido bastante malas y en clase me transmite la sensación de que no se ha enterado de mucho durante el TC y tengo mis sospechas de que el trabajo está hecho en una gran parte con IA, su tarea presenta un error se lo indicaremos y le diremos que lo corrija en directo.\nEl error es que no llama bien al método get de texto, utiliza una mayúscula en vez de una minúscula." }, { - "objectID": "pages/Bloque3/t10.html", - "href": "pages/Bloque3/t10.html", - "title": "T10: Quiz app!", + "objectID": "pages/Bloque3/ReactI.html", + "href": "pages/Bloque3/ReactI.html", + "title": "React I", "section": "", - "text": "Desarrollar una aplicación React que permita al usuario realizar un quiz de cultura general utilizando preguntas obtenidas desde una API pública.\nhttps://astonishing-douhua-44213e.netlify.app/\nLa aplicación debe mostrar preguntas, permitir seleccionar respuestas y calcular la puntuación final.", + "text": "Contenido", "crumbs": [ "Bloque III Interacción", - "Semana 10", - "T10: Quiz app!" + "Semana 7", + "React I" ] }, { - "objectID": "pages/Bloque3/t10.html#objetivo", - "href": "pages/Bloque3/t10.html#objetivo", - "title": "T10: Quiz app!", + "objectID": "pages/Bloque3/ReactI.html#sintaxis-jsx", + "href": "pages/Bloque3/ReactI.html#sintaxis-jsx", + "title": "React I", + "section": "Sintaxis JSX", + "text": "Sintaxis JSX\n\n¿Qué es la sintaxis JSX?\n\nJSX (JavaScript XML) es una extensión de JavaScript utilizada en React.\n\nPermite escribir estructuras similares a HTML directamente dentro del código JavaScript.\n\nFacilita la creación y lectura de interfaces de usuario, integrando lógica y presentación.\n\nAunque su apariencia es HTML, JSX se transpila a JavaScript puro antes de ejecutarse en el navegador.\nForma cómoda de almacenar etiquetas html como variables de JS\n\n\n\n¿Qué nos ofrece la sintaxis JSX?\n\nAlmacenar una etiqueta como una variable\nconst title = <h1>Web del TC de SW</h1>;\n\nconst driveIndication = (drives)? <p>Puede conducir</p> : <p>No puede conducir</p>;\nDe esta forma la variable title se corresponde con una etiqueta que contiene el título. Sin embargo, como podemos podemos utilizar está etiqueta una vez la hemos definido como una variable.\n\n\nRenderizar etiquetas dentro de etiquetas\nconst title = <h1>Web del TC de SW</h1>;\n\nconst page = <div>{title}</div>\nDe esta forma estámos encapsulando la etiqueta h1 dentro del div.\n\n\nRenderizar con el map\nconst profeAsi= [[\"Rosa\", \"Macro I\"], [\"Gabriela\", \"FSO\"],[\"Yolanda\",\"LTP\"], [\"Ferrán\", \"EM\"], [\"Pepe\", \"TCO\"]];\n\n// Array de li Asignatura: nombre profesor\nconst itemsProfAsi = profeAsi.map(x => <li>{x[1]}: {x[0]}</li>);\n\nconst listaProfesoresAsignatura = <ul>{itemsProfAsi}</ul>;\n\n\nRenderizar con el map\nconst profeAsi= [[\"Rosa\", \"Macro I\"], [\"Gabriela\", \"FSO\"], [\"Yolanda\",\"LTP\"], [\"Ferrán\", \"EM\"], [\"Pepe\", \"TCO\"]];\n\nconst listaProfesoresAsignatura = <ul>\n{profeAsi.map((x,i) => <li key={i}>{x[1]}: {x[0]}</li>)}\n</ul>;", + "crumbs": [ + "Bloque III Interacción", + "Semana 7", + "React I" + ] + }, + { + "objectID": "pages/Bloque3/ReactI.html#react", + "href": "pages/Bloque3/ReactI.html#react", + "title": "React I", + "section": "React", + "text": "React\n\nMotivación\nHasta el momento hemos trabajado únicamente con HTML5, el cual a pesar de ser muy eficaz, presenta el inconveniente de que no implementa ninguna clase de lógica. Es decir, si queremos repetir alguna estructura previamente definida deberemos copiarla y pegarla. Otro problema, de HTML puro es la complejidad que requiere el manejo del DOM, como ya se vio en la semana anterior.\nBajo este pretexto, introducimos el framework React diseñado por Meta.\n\n\nBases de React\nReact es un componente basado en la sintaxis JS y en la programación funcional introducida en ES6.\n\n\nComponente React\nLos componentes de React los definimos como unidades reutilizables y modulares que se implementan de esta forma: una función que devuelve un objeto de JSX\nfunction Saludo() {\n return <h1>Hola, mundo</h1>;\n}\nPodemos renderizar nuestro componente Saludo asumiendo que se comporta como una etiqueta html. Recordemos que no lo es.\n<main>\n <Saludo />\n</main>\nDentro de este componente podemos incluir lógica propia de JavaScript, de forma que al definir componente podemos dotarlo de lógica interna.\nfunction DivNúmeroAleatorio() {\n\n let n = Math.random();\n return <div className=\"n-random\">{n}</div>;\n}\n*Nótese que aunque JS utilice camelCase para el nombre de las funciones, con React utilizaremos PascalCase para definir los componentes puesto que a pesar de que se trata de funciones, trabajaremos con ellas como si fuesen clases.\n\n\nProps en React\nHasta ahora, los componentes definidos siempre devuelven el mismo contenido. Sin embargo, para que un componente sea realmente reutilizable, necesitamos poder pasarle información desde el exterior.\nEn React, esta información se transmite mediante props (properties).\nLas props se definen como los parámetros de entrada de un componente y permiten personalizar su comportamiento o su contenido sin modificar su definición interna.\n\nEjemplo 1: uso de props (forma explícita)\nfunction Saludo(props) {\n return <h1>Hola, {props.nombre}</h1>;\n}\nUso del componente:\n<Saludo nombre=\"Rosa\" />\n<Saludo nombre=\"Gabriela\" />\n\n\nEjemplo 2: props desestructuradas (sintaxis JavaScript)\nfunction Saludo({ nombre }) {\n return <h1>Hola, {nombre}</h1>;\n}\nUso del componente (idéntico al anterior):\n<Saludo nombre=\"Rosa\" />\n<Saludo nombre=\"Gabriela\" />\n\n\n\nEventos en React\nEn React, el manejo de eventos se basa en los eventos del DOM, pero utilizando una sintaxis propia de JSX y siguiendo el estilo de JavaScript.\n\nEjemplo básico de evento\nfunction BotonSaludo() {\n\n function manejarClick() {\n alert(\"Hola desde React\");\n }\n\n return (\n <button onClick={manejarClick}>\n Saludar\n </button>\n );\n}\n\n\nPaso de funciones como eventos\nLa función asociada al evento no se ejecuta al renderizar el componente, sino únicamente cuando ocurre el evento; es decir la pasamos como un ciudadano de primera clase.\n<button onClick={manejarClick}>Saludar</button>\nIncorrecto:\n<button onClick={manejarClick()}>Saludar</button>\n\n\nEventos más habituales en React\nReact soporta la mayoría de los eventos del DOM, adaptados a la sintaxis JSX. A continuación se listan los eventos más utilizados, clasificados por tipo.\n\nEventos de ratón\n\nonClick\nonDoubleClick\nonMouseEnter\nonMouseLeave\nonMouseMove\nonMouseDown\nonMouseUp\n\n\n\nEventos de teclado\n\nonKeyDown\nonKeyUp\nonKeyPress\n\n\n\nEventos de formularios\n\nonChange\nonSubmit\nonFocus\nonBlur\nonInput\nonReset\n\n\n\nEventos de carga y ciclo del elemento\n\nonLoad\nonError\n\n\n\nEventos de selección y portapapeles\n\nonSelect\nonCopy\nonCut\nonPaste\n\n\n\nEventos táctiles (dispositivos móviles)\n\nonTouchStart\nonTouchMove\nonTouchEnd\nonTouchCancel\n\n\n\n\n\nCiclo de vida de los componentes y renderizado en React\nEn React, los componentes no se renderizan directamente sobre el DOM real, sino que siguen un proceso intermedio que permite optimizar las actualizaciones de la interfaz.\nLa idea clave es que la interfaz se organiza como un árbol de componentes, análogo al árbol del DOM, pero a un nivel de abstracción superior.\n\nEl árbol de componentes\nCuando una aplicación React se ejecuta:\n\nCada componente genera otros componentes o elementos JSX.\nReact construye un árbol de componentes, donde:\n\nEl componente raíz suele ser App\nCada componente hijo ocupa una rama del árbol\n\n\nEste árbol de componentes se corresponde conceptualmente con el árbol del DOM, aunque no es el DOM real.\n\n\nProceso de renderizado\nEl proceso general es el siguiente:\n\nReact ejecuta un componente (función).\nEl componente devuelve JSX.\nEl JSX se transforma en una representación interna del árbol.\nReact compara este árbol con el anterior.\nSolo se actualizan en el DOM real los nodos que han cambiado.\n\nDe esta forma, React minimiza el acceso directo al DOM, que es una operación costosa.\n\n\nCiclo de vida (visión simplificada)\nDesde un punto de vista conceptual, un componente pasa por tres fases:\n\nMontaje\n\nEl componente se crea y se inserta en el DOM.\n\nActualización\n\nEl componente se vuelve a renderizar cuando cambian sus datos.\n\nDesmontaje\n\nEl componente se elimina del DOM.\n\n\nEn componentes funcionales modernos, este ciclo se gestiona de forma implícita mediante el renderizado y, más adelante, mediante hooks.\n\n\nRelación con el DOM\n\nEn JavaScript puro:\n\nSe modifica el DOM directamente.\n\nEn React:\n\nSe describe cómo debe ser la interfaz.\nReact decide el cuándo y el cómo modificar el DOM.\n\n\nEl desarrollador no recorre ni manipula el árbol del DOM, sino que trabaja sobre el árbol de componentes.", + "crumbs": [ + "Bloque III Interacción", + "Semana 7", + "React I" + ] + }, + { + "objectID": "pages/Bloque3/ReactI.html#creación-de-una-reactjs-app", + "href": "pages/Bloque3/ReactI.html#creación-de-una-reactjs-app", + "title": "React I", + "section": "Creación de una ReactJS app", + "text": "Creación de una ReactJS app\nEl desarrollo de aplicaciones web modernas requiere coordinar múltiples elementos: estructura del proyecto, gestión de dependencias, compilación del código y ejecución en el navegador.\nUn framework de desarrollo proporciona un entorno de trabajo preconfigurado que organiza estos elementos y establece una forma estándar de trabajar.\n\n¿Para qué sirve un framework?\nUn framework permite al desarrollador:\n\nEvitar configuraciones manuales complejas\nSeguir una estructura común de proyecto\nAutomatizar tareas repetitivas\nCentrarse en la lógica de la aplicación y no en la infraestructura\n\nEn lugar de partir de un proyecto vacío, el framework ofrece una base funcional sobre la que desarrollar.\n\n\nFramework y React\nReact se encarga de definir cómo se construye la interfaz, pero no gestiona por sí mismo:\n\nLa estructura de archivos\nEl arranque de la aplicación\nLa compilación del código\nEl servidor de desarrollo\n\nPor ello, React se apoya en un framework que orquesta el entorno de ejecución.\n\n\nCreación de la aplicación\nPara crear una nueva aplicación React utilizando un framework, se ejecuta el siguiente comando en la terminal:\nnpm create vite@latest\nEste comando genera:\n\nUna estructura inicial del proyecto\nLa configuración necesaria para trabajar con React\nUn entorno listo para el desarrollo", + "crumbs": [ + "Bloque III Interacción", + "Semana 7", + "React I" + ] + }, + { + "objectID": "pages/Bloque3/reactI.html#sintaxis-jsx", + "href": "pages/Bloque3/reactI.html#sintaxis-jsx", + "title": "React I", + "section": "Sintaxis JSX", + "text": "Sintaxis JSX\n¿Qué es la sintaxis JSX?\n\nJSX (JavaScript XML) es una extensión de JavaScript utilizada en React.\n\nPermite escribir estructuras similares a HTML directamente dentro del código JavaScript.\n\nFacilita la creación y lectura de interfaces de usuario, integrando lógica y presentación.\n\nAunque su apariencia es HTML, JSX se transpila a JavaScript puro antes de ejecutarse en el navegador.\nForma cómoda de almacenar etiquetas html como variables de JS" + }, + { + "objectID": "pages/Bloque3/reactI.html#react", + "href": "pages/Bloque3/reactI.html#react", + "title": "React I", + "section": "React", + "text": "React\nMotivación\nHasta el momento hemos trabajado únicamente con HTML5, el cual a pesar de ser muy eficaz, presenta el inconveniente de que no implementa ninguna clase de lógica. Es decir, si queremos repetir alguna estructura previamente definida deberemos copiarla y pegarla. Otro problema, de HTML puro es la complejidad que requiere el manejo del DOM, como ya se vio en la semana anterior.\nBajo este pretexto, introducimos el framework React diseñado por Meta." + }, + { + "objectID": "pages/Bloque3/reactI.html#creación-de-una-reactjs-app", + "href": "pages/Bloque3/reactI.html#creación-de-una-reactjs-app", + "title": "React I", + "section": "Creación de una ReactJS app", + "text": "Creación de una ReactJS app\nEl desarrollo de aplicaciones web modernas requiere coordinar múltiples elementos: estructura del proyecto, gestión de dependencias, compilación del código y ejecución en el navegador.\nUn framework de desarrollo proporciona un entorno de trabajo preconfigurado que organiza estos elementos y establece una forma estándar de trabajar." + }, + { + "objectID": "pages/Bloque3/DOM.html", + "href": "pages/Bloque3/DOM.html", + "title": "DOM", "section": "", +<<<<<<< HEAD "text": "Desarrollar una aplicación React que permita al usuario realizar un quiz de cultura general utilizando preguntas obtenidas desde una API pública.\nhttps://astonishing-douhua-44213e.netlify.app/\nLa aplicación debe mostrar preguntas, permitir seleccionar respuestas y calcular la puntuación final.", "crumbs": [ "Bloque III Interacción", @@ -215,206 +273,277 @@ "section": "", "text": "Además de las propiedades estudiadas de CSS también hay algunas críticas que debido a la falta de tiempo no se han podido explicar como es el caso de display a continuación estos dos vídeos profundizan en los modos flex y grid formas diferentes de diseñar la estructura de la página", <<<<<<< HEAD +======= + "text": "El DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador.", +>>>>>>> e3c3469 (feat: varios) "crumbs": [ "Bloque III Interacción", "Semana 6", - "MA: CSS Flex y CSS" + "DOM" ] }, { - "objectID": "pages/Bloque3/ReactIV.html", - "href": "pages/Bloque3/ReactIV.html", - "title": "React IV", + "objectID": "pages/Bloque3/DOM.html#qué-es-el-dom", + "href": "pages/Bloque3/DOM.html#qué-es-el-dom", + "title": "DOM", "section": "", - "text": "Contenido", + "text": "El DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador.", "crumbs": [ "Bloque III Interacción", - "Semana 10", - "React IV" + "Semana 6", + "DOM" ] }, { - "objectID": "pages/Bloque3/ReactIV.html#ecosistema-node", - "href": "pages/Bloque3/ReactIV.html#ecosistema-node", - "title": "React IV", - "section": "Ecosistema Node", - "text": "Ecosistema Node\nHasta ahora hemos trabajado únicamente con React y JavaScript.\nSin embargo, en el desarrollo real de aplicaciones es muy común utilizar librerías externas, para ello podemos recurrir Node.JS.\nReact está diseñado para funcionar dentro de un ecosistema de paquetes.\nEjemplos habituales:\n\nReact Router → navegación\nAxios → peticiones HTTP\nChart.js → gráficas\nZustand / Redux → gestión de estado\nLibrerías de UI: Tailwind, Bootstrap, Booswatch", + "objectID": "pages/Bloque3/DOM.html#el-dom-como-árbol", + "href": "pages/Bloque3/DOM.html#el-dom-como-árbol", + "title": "DOM", + "section": "El DOM como árbol", + "text": "El DOM como árbol\nEl DOM tiene estructura de árbol (grafo):\n\nCada etiqueta HTML es un nodo\nLos nodos tienen relaciones (padre, hijos, hermanos)\n\nEjemplo:\n<body>\n <h1>Título</h1>\n <button>Click</button>\n</body>\nRepresentación conceptual:\ndocument\n └─ body\n ├─ h1\n └─ button", "crumbs": [ "Bloque III Interacción", - "Semana 10", - "React IV" + "Semana 6", + "DOM" ] }, { - "objectID": "pages/Bloque3/ReactIV.html#npm", - "href": "pages/Bloque3/ReactIV.html#npm", - "title": "React IV", - "section": "npm", - "text": "npm\nnpm (Node Package Manager) es el sistema que permite instalar y gestionar librerías de JavaScript. Como su nombre indica, está desarrollado por Node.JS\nCada proyecto tiene un archivo:\npackage.json\nEn este archivo se registran las dependencias del proyecto.\nEjemplo:\n{\n \"dependencies\": {\n \"react\": \"^18.0.0\",\n \"react-router-dom\": \"^6.0.0\"\n }\n}\n\nInstalación de paquetes\nLas librerías se instalan desde la terminal.\nnpm install react-router-dom\nEsto hace tres cosas:\n\nDescarga el paquete\nLo guarda en node_modules (capreta donde se guardan las librerías externas)\nAñade la dependencia en package.json", + "objectID": "pages/Bloque3/DOM.html#acceso-al-dom-desde-javascript", + "href": "pages/Bloque3/DOM.html#acceso-al-dom-desde-javascript", + "title": "DOM", + "section": "Acceso al DOM desde JavaScript", + "text": "Acceso al DOM desde JavaScript\nEl navegador nos proporciona el objeto global document, que permite:\n\nBuscar elementos\nLeer su contenido\nModificar la interfaz\n\ndocument\ndocument.body", "crumbs": [ "Bloque III Interacción", - "Semana 10", - "React IV" + "Semana 6", + "DOM" ] }, { - "objectID": "pages/Bloque3/ReactIV.html#react-router", - "href": "pages/Bloque3/ReactIV.html#react-router", - "title": "React IV", - "section": "React Router", - "text": "React Router\nEn una aplicación web tradicional cada enlace carga una página nueva.\nEn React normalmente trabajamos con Single Page Applications (SPA).\nEn una SPA:\n\nel navegador no recarga la página\nReact cambia los componentes que se muestran\n\nPara gestionar esto utilizamos React Router.\nRealmente es la misma página, solo que el usuario lo percibe como distintas páginas\nEl usuario percibirá que el sitio web está divido en diferentes subpáginas\n\n/\npokemons\npokemons/pikachu\n\n\nComponentes principales de React Router\nLos elementos fundamentales son:\n\nBrowserRouter\nRoutes\nRoute\nLink\n\nEjemplo básico:\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\n\nfunction App() {\n return (\n <BrowserRouter>\n\n <Routes>\n\n <Route path=\"/\" element={<Home />} />\n\n <Route path=\"/pokemons\" element={<PokemonList />} />\n\n </Routes>\n\n </BrowserRouter>\n );\n}\nElementos del código\n\nBrowserRouter\nEs el componente que activa el sistema de navegación de React Router. Utiliza la API de historial del navegador para cambiar la URL sin recargar la página.\nRoutes\nEs el contenedor donde se definen todas las rutas de la aplicación. React Router examina las rutas dentro de este componente para decidir qué componente mostrar.\nRoute\nDefine una ruta concreta de la aplicación.\n\n\npath\nIndica la URL que activa la ruta.\nEjemplo: / corresponde a la página principal.\nelement\nEs el componente de React que se renderiza cuando la URL coincide con el path.\n<Home />\nComponente que se muestra cuando el usuario accede a la ruta /.\n<PokemonList />\nComponente que se muestra cuando el usuario accede a la ruta /pokemons.\n\n\n\nNavegación\nPara navegar entre páginas utilizamos el componente Link.\nimport { Link } from \"react-router-dom\";\n\n<Link to=\"/\">Inicio</Link>\n\n<Link to=\"/pokemon\">Pokemon</Link>\nA diferencia de <a>:\n\nno recarga la página\nReact cambia el componente visible\n\n\n\nParámetros dinámicos\nPodemos crear rutas dinámicas.\nEjemplo:\n/pokemon/25\n/pokemon/7\nDefinición de la ruta:\n<Route path=\"/pokemon/:id\" element={<PokemonDetail />} />\n\nuseParams\nPara acceder al parámetro utilizamos el hook useParams de React Router.\nimport { useParams } from \"react-router-dom\";\n\nfunction PokemonDetail() {\n\n const { id } = useParams();\n\n return <p>Pokemon {id}</p>;\n\n}\nEste parámetro puede utilizarse para realizar peticiones a una API.", + "objectID": "pages/Bloque3/DOM.html#selectores", + "href": "pages/Bloque3/DOM.html#selectores", + "title": "DOM", + "section": "Selectores", + "text": "Selectores\n\nPor ID\ndocument.getElementById(\"count\")\ndocument.querySelector(\"#count\")\n\n\nPor etiqueta\ndocument.querySelector(\"button\")\n\n\nPor clase\ndocument.querySelector(\".item\")\ndocument.querySelectorAll(\".item\")\nNotas: - querySelector devuelve el primer elemento - querySelectorAll devuelve una lista - Usan la misma sintaxis que CSS", "crumbs": [ "Bloque III Interacción", - "Semana 10", - "React IV" + "Semana 6", + "DOM" ] }, { - "objectID": "pages/Bloque3/ReactIV.html#context-api", - "href": "pages/Bloque3/ReactIV.html#context-api", - "title": "React IV", - "section": "Context API", - "text": "Context API\nEn aplicaciones grandes aparece un problema frecuente.\nMuchos componentes necesitan acceder a la misma información.\nPor ejemplo:\n\nusuario\ntema visual\nidioma\nconfiguración\n\nSi pasamos la información mediante props, los datos deben atravesar muchos componentes.\nRepresentación conceptual:\nApp\n └ Layout\n └ Page\n └ Component\nSi todos necesitan user, debemos pasar la prop continuamente.\nEste problema se conoce como prop drilling.\n\nContext\nReact proporciona una solución llamada Context.\nContext permite compartir información entre múltiples componentes sin pasar props manualmente.\nEl proceso tiene tres pasos:\n\nCrear el contexto\nProveer el contexto\nConsumir el contexto\n\n\nCrear un contexto\nimport { createContext } from \"react\";\n\nconst UserContext = createContext();\nEsto crea un contenedor que puede almacenar información compartida.\n\n\nProvider\nEl Provider permite que los componentes hijos accedan al contexto.\n<UserContext.Provider value={user}>\n\n <App />\n\n</UserContext.Provider>\nTodos los componentes dentro del Provider pueden acceder al valor.\n\n\nConsumir el contexto\nPara acceder al contexto utilizamos el hook useContext.\nimport { useContext } from \"react\";\n\nconst user = useContext(UserContext);\nEl componente obtiene directamente el valor almacenado en el contexto.\n\n\nEjemplo completo\nimport { createContext, useContext } from \"react\";\n\nconst UserContext = createContext();\n\nfunction App() {\n\n const user = { name: \"Javier\" };\n\n return (\n\n <UserContext.Provider value={user}>\n\n <Profile />\n\n </UserContext.Provider>\n\n );\n}\n\nfunction Profile() {\n\n const user = useContext(UserContext);\n\n return <h1>{user.name}</h1>;\n\n}", + "objectID": "pages/Bloque3/DOM.html#leer-y-modificar-elementos", + "href": "pages/Bloque3/DOM.html#leer-y-modificar-elementos", + "title": "DOM", + "section": "Leer y modificar elementos", + "text": "Leer y modificar elementos\nelement.textContent\nelement.textContent = \"Nuevo texto\"\nelement.classList.add(\"active\")\nelement.classList.remove(\"active\")", "crumbs": [ "Bloque III Interacción", - "Semana 10", - "React IV" + "Semana 6", + "DOM" ] }, { - "objectID": "pages/Bloque3/presentacion-reactIV.html#ecosistema-node", - "href": "pages/Bloque3/presentacion-reactIV.html#ecosistema-node", - "title": "React IV", - "section": "Ecosistema Node", - "text": "Ecosistema Node\nHasta ahora hemos trabajado únicamente con React y JavaScript.\nSin embargo, en el desarrollo real de aplicaciones es muy común utilizar librerías externas, para ello podemos recurrir Node.JS.\nReact está diseñado para funcionar dentro de un ecosistema de paquetes." - }, - { - "objectID": "pages/Bloque3/presentacion-reactIV.html#npm", - "href": "pages/Bloque3/presentacion-reactIV.html#npm", - "title": "React IV", - "section": "npm", - "text": "npm\nnpm (Node Package Manager) es el sistema que permite instalar y gestionar librerías de JavaScript. Como su nombre indica, está desarrollado por Node.JS\nCada proyecto tiene un archivo:\npackage.json\nEn este archivo se registran las dependencias del proyecto." - }, - { - "objectID": "pages/Bloque3/presentacion-reactIV.html#react-router", - "href": "pages/Bloque3/presentacion-reactIV.html#react-router", - "title": "React IV", - "section": "React Router", - "text": "React Router\nEn una aplicación web tradicional cada enlace carga una página nueva.\nEn React normalmente trabajamos con Single Page Applications (SPA).\nEn una SPA:\n\nel navegador no recarga la página\nReact cambia los componentes que se muestran\n\nPara gestionar esto utilizamos React Router.\nRealmente es la misma página, solo que el usuario lo percibe como distintas páginas" - }, - { - "objectID": "pages/Bloque3/presentacion-reactIV.html#context-api", - "href": "pages/Bloque3/presentacion-reactIV.html#context-api", - "title": "React IV", - "section": "Context API", - "text": "Context API\nEn aplicaciones grandes aparece un problema frecuente.\nMuchos componentes necesitan acceder a la misma información.\nPor ejemplo:\n\nusuario\ntema visual\nidioma\nconfiguración\n\nSi pasamos la información mediante props, los datos deben atravesar muchos componentes." - }, - { - "objectID": "pages/Bloque3/MAentorno.html", - "href": "pages/Bloque3/MAentorno.html", - "title": "MA: Entorno", - "section": "", - "text": "Tanto trabajando con React como con JavaScript puede ser útil leer propiedades del navegador, así como almacenar información en los dispositivos locales." - }, - { - "objectID": "pages/Bloque3/Intermedio.html", - "href": "pages/Bloque3/Intermedio.html", - "title": "React III", - "section": "", - "text": "Contenido", + "objectID": "pages/Bloque3/DOM.html#eventos", + "href": "pages/Bloque3/DOM.html#eventos", + "title": "DOM", + "section": "Eventos", + "text": "Eventos\nEl DOM permite reaccionar a acciones del usuario mediante eventos.\nbutton.addEventListener(\"click\", () => {\n // código a ejecutar\n});\nFlujo típico:\nUsuario → Evento → JavaScript → DOM actualizado", "crumbs": [ "Bloque III Interacción", - "Semana 9", - "React III" + "Semana 6", + "DOM" ] }, { - "objectID": "pages/Bloque3/Intermedio.html#controlled-inputs", - "href": "pages/Bloque3/Intermedio.html#controlled-inputs", - "title": "React III", - "section": "Controlled Inputs", - "text": "Controlled Inputs\n\nMotivación\nHasta ahora se ha trabajado con eventos capturando acciones del usuario.\nSin embargo, al trabajar con formularios surge una cuestión fundamental:\n\n¿Quién controla el valor del input?\n¿El DOM o React?\n\nRecordemos que en HTML puro o, el valor de un <input> está gestionado directamente por el DOM.\nEn React, podemos hacer que el valor del input esté controlado por el estado del componente.\nA esto lo llamamos controlled input.\n\n\n¿Qué es un controlled input?\nUn controlled input es un elemento de formulario cuyo valor:\n\nEstá almacenado en el estado del componente\nSe actualiza mediante un evento (onChange)\nSe renderiza utilizando ese mismo estado\n\nÚnica fuente de verdad (single source of truth).\n\n\nEstructura del componente controlled\nimport { useState } from \"react\";\nfunction FormularioNombre() {\n\n const [nombre, setNombre] = useState(\"\");\n\n function manejarCambio(event) {\n setNombre(event.target.value);\n }\n\n return (\n <div>\n <input type=\"text\" \n value={nombre}\n onChange={manejarCambio}\n />\n <p>El nombre introducido es: {nombre}</p>\n </div>\n );\n}\n\nAnálisis del ejemplo\nEl valor del input se sincroniza con el estado\n\nDeclaramos una variable de estado: nombre\nAsociamos el atributo value del input a ese estado\nCapturamos el evento onChange\nActualizamos el estado con setNombre\n\nCada vez que el estado cambia: El componente se vuelve a ejecutar El JSX se vuelve a generar El valor del input se sincroniza con el estado\n\n\n\nEjemplo Formulario\nimport { useState } from \"react\";\n\nfunction FormularioSimple() {\n\n const [email, setEmail] = useState(\"\");\n\n function handleChange(event) {\n setEmail(event.target.value);\n }\n\n function handleSubmit(event) {\n event.preventDefault(); // Evita la recarga del navegador\n\n console.log(\"Formulario enviado\");\n console.log(\"Email:\", email);\n\n setEmail(\"\"); // Limpieza opcional del campo\n }\n\n return (\n <form onSubmit={handleSubmit}>\n <input \n type=\"email\"\n value={email}\n onChange={handleChange}\n />\n <button type=\"submit\">Enviar</button>\n </form>\n );\n}\nReferencia: https://es.react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable", + "objectID": "pages/Bloque3/DOM.html#ejemplo-contador-con-botón", + "href": "pages/Bloque3/DOM.html#ejemplo-contador-con-botón", + "title": "DOM", + "section": "Ejemplo: contador con botón", + "text": "Ejemplo: contador con botón\n\nHTML\n<h1 id=\"count\">0</h1>\n<button id=\"btn\">Sumar 1</button>\n\n\nJavaScript\nlet count = 0;\n\nconst countEl = document.querySelector(\"#count\");\nconst btn = document.querySelector(\"#btn\");\n\nbtn.addEventListener(\"click\", () => {\n count++;\n countEl.textContent = count;\n});", "crumbs": [ "Bloque III Interacción", - "Semana 9", - "React III" + "Semana 6", + "DOM" ] }, { - "objectID": "pages/Bloque3/Intermedio.html#hooks-repaso", - "href": "pages/Bloque3/Intermedio.html#hooks-repaso", - "title": "React III", - "section": "Hooks (Repaso)", - "text": "Hooks (Repaso)\n\nFunción especial que permite modificar las propiedades internas de los componentes\nCaracterísticas avanzadas\nModificación del life-cycle\nNormalmente forma use____", + "objectID": "pages/Bloque3/DOM.html#más-ejemplos", + "href": "pages/Bloque3/DOM.html#más-ejemplos", + "title": "DOM", + "section": "Más ejemplos", + "text": "Más ejemplos\nEj1: Show input\nEj2: Par e Impar\nEj3: Toggle\nEj4: Creación dinámica\nEj5: Validación básica", "crumbs": [ "Bloque III Interacción", - "Semana 9", - "React III" + "Semana 6", + "DOM" ] }, { - "objectID": "pages/Bloque3/Intermedio.html#useeffect", - "href": "pages/Bloque3/Intermedio.html#useeffect", - "title": "React III", - "section": "useEffect", - "text": "useEffect\n\nuseEffect es un Hook que permite ejecutar efectos secundarios dentro de un componente funcional.\nUn efecto secundario es cualquier operación que no sea simplemente devolver JSX (por ejemplo: peticiones a un servidor, temporizadores, suscripciones).\nSe ejecuta después de que el componente se renderiza en el DOM.\n\n\nMétodos de uso de useEffect\n\n1. Sin array de dependencias\nuseEffect(() => {\n console.log(\"Se ejecuta en cada render\");\n});\nComportamiento:\n\nSe ejecuta después de cada renderizado.\nNo existe control sobre la frecuencia.\nPuede generar bucles si modifica estado sin control.\n\nInterpretación conceptual:\nEl efecto acompaña siempre al render.\n\n\n2. Con array vacío\nuseEffect(() => {\n console.log(\"Se ejecuta solo una vez\");\n}, []);\nComportamiento:\n\nSe ejecuta únicamente tras el primer render.\nEquivalente conceptual al “montaje” del componente.\n\nUso habitual:\n\nPeticiones a servidor\nInicializaciones\nSuscripciones\n\nInterpretación conceptual:\nEl efecto ocurre una única vez al crear el componente.\n\n\n3. Con dependencias específicas\nuseEffect(() => {\n console.log(\"Se ejecuta cuando cambia contador\");\n}, [contador]);\nComportamiento:\n\nSe ejecuta tras el primer render.\nSe vuelve a ejecutar cuando cambia alguna variable del array.\n\nInterpretación conceptual:\nEl efecto depende del estado indicado.\nReact compara el valor anterior con el nuevo y decide si debe ejecutar el efecto.", - "crumbs": [ - "Bloque III Interacción", - "Semana 9", - "React III" - ] + "objectID": "pages/Bloque3/dom.html#qué-es-el-dom", + "href": "pages/Bloque3/dom.html#qué-es-el-dom", + "title": "DOM", + "section": "¿Qué es el DOM?", + "text": "¿Qué es el DOM?\nEl DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador." }, { - "objectID": "pages/Bloque3/Intermedio.html#fetch", - "href": "pages/Bloque3/Intermedio.html#fetch", - "title": "React III", - "section": "fetch()", - "text": "fetch()\nHasta ahora nuestros componentes eran completamente locales.\nSin embargo, en aplicaciones reales necesitamos:\n\nDescargar datos\n\nConectarnos a servidores\n\nTrabajar con APIs externas\n\nPara ello utilizamos fetch().\n\nEjemplo mínimo de fetch\nfetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n .then(response => response.json())\n .then(data => console.log(data));\nUtiliza las Promises\nInterpretación simple:\n\nSe hace una petición a una URL\n\nSe transforma la respuesta a formato JSON\n\nSe accede a los datos\n\n\n\nfetch() dentro de useEffect\nEn React, lo habitual es realizar la descarga cuando el componente se monta.\nPara ello:\n\nUtilizamos useEffect\nAñadimos array vacío []\nGuardamos los datos en el estado\n\n\n\nEjemplo integrado\nimport { useState, useEffect } from \"react\";\n\nfunction Pokemon() {\n\n const [pokemon, setPokemon] = useState(null);\n\n useEffect(() => {\n\n fetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n .then(response => response.json())\n .then(data => setPokemon(data));\n\n }, []);\n\n if (!pokemon) return <p>Cargando...</p>;\n\n return (\n <div>\n <h2>{pokemon.name}</h2>\n <img \n src={pokemon.sprites.front_default} \n alt={pokemon.name} \n />\n </div>\n );\n}\n\n\nFlujo conceptual\n\nRender inicial\n\nSe ejecuta useEffect\n\nSe lanza la petición\n\nSe actualiza el estado\n\nNuevo render con los datos\n\n\n\nAdvertencia importante\nSi eliminamos el array vacío:\nuseEffect(() => {\n fetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n .then(res => res.json())\n .then(data => setPokemon(data));\n});\nEl efecto se ejecutará en cada render.\nComo actualizar estado provoca render, se generará un bucle infinito.\nuseEffect conecta React con el exterior.\nfetch() permite traer datos del exterior.\nEl estado vuelve a controlar el render.\nEn la siguiente sección formalizaremos esto utilizando async / await.", - "crumbs": [ - "Bloque III Interacción", - "Semana 9", - "React III" - ] + "objectID": "pages/Bloque3/dom.html#el-dom-como-árbol", + "href": "pages/Bloque3/dom.html#el-dom-como-árbol", + "title": "DOM", + "section": "El DOM como árbol", + "text": "El DOM como árbol\nEl DOM tiene estructura de árbol (grafo):\n\nCada etiqueta HTML es un nodo\nLos nodos tienen relaciones (padre, hijos, hermanos)\n\nEjemplo:\n<body>\n <h1>Título</h1>\n <button>Click</button>\n</body>" }, { - "objectID": "pages/Bloque3/Intermedio.html#async-y-await", - "href": "pages/Bloque3/Intermedio.html#async-y-await", - "title": "React III", - "section": "async y await", - "text": "async y await\nHasta ahora hemos utilizado fetch() con encadenamiento.\nExiste una forma más clara y estructurada de escribir código asíncrono:\n\nasync\nawait\n\nSu objetivo es hacer que el código sea más legible.\n\n¿Qué significa async?\n\nSe coloca delante de una función\nIndica que la función trabajará con operaciones asíncronas\n\nasync function ejemplo() {\n console.log(\"Función asíncrona\");\n}\n\n\n¿Qué significa await?\n\nSolo puede utilizarse dentro de una función async\nDetiene la ejecución hasta que la operación finaliza\nHace que el código se lea de forma secuencial\n\n\n\nEjemplo básico con fetch\nasync function obtenerPokemon() {\n\n const response = await fetch(\n \"https://pokeapi.co/api/v2/pokemon/1\"\n );\n\n const data = await response.json();\n\n console.log(data);\n}\nInterpretación conceptual:\n\nSe realiza la petición\nSe espera la respuesta\nSe transforma a JSON\nSe trabaja con los datos\n\nEl código se lee de arriba hacia abajo.\n\n\nasync / await dentro de useEffect\nEn React, lo habitual es declarar una función interna y ejecutarla.\n\n\nEjemplo completo\nimport { useState, useEffect } from \"react\";\n\nfunction Pokemon() {\n\n const [pokemon, setPokemon] = useState(null);\n\n useEffect(() => {\n\n async function fetchData() {\n\n const response = await fetch(\n \"https://pokeapi.co/api/v2/pokemon/1\"\n );\n\n const data = await response.json();\n\n setPokemon(data);\n }\n\n fetchData();\n\n }, []);\n\n if (!pokemon) return <p>Cargando...</p>;\n\n return (\n <div>\n <h2>{pokemon.name}</h2>\n <img \n src={pokemon.sprites.front_default} \n alt={pokemon.name} \n />\n </div>\n );\n}\n\n\n¿Por qué no hacer directamente?\nuseEffect(async () => {\n ...\n}, []);\nPorque useEffect no debe recibir una función asíncrona directamente.\nPor eso declaramos la función dentro y luego la ejecutamos.\n\n\nFlujo mental con async / await\n\nRender inicial\n\nSe ejecuta useEffect\n\nSe llama a la función asíncrona\n\nawait espera la respuesta\n\nSe actualiza el estado\n\nNuevo render\n\nasync / await no cambia lo que hace el programa.\nSolo cambia la forma de escribirlo:\nMás claro.\nMás estructurado.\nMás fácil de mantener.", + "objectID": "pages/Bloque3/dom.html#acceso-al-dom-desde-javascript", + "href": "pages/Bloque3/dom.html#acceso-al-dom-desde-javascript", + "title": "DOM", + "section": "Acceso al DOM desde JavaScript", + "text": "Acceso al DOM desde JavaScript\nEl navegador nos proporciona el objeto global document, que permite:\n\nBuscar elementos\nLeer su contenido\nModificar la interfaz\n\ndocument\ndocument.body" + }, + { + "objectID": "pages/Bloque3/dom.html#selectores", + "href": "pages/Bloque3/dom.html#selectores", + "title": "DOM", + "section": "Selectores", + "text": "Selectores\nPor ID\ndocument.getElementById(\"count\")\ndocument.querySelector(\"#count\")\nPor etiqueta\ndocument.querySelector(\"button\")" + }, + { + "objectID": "pages/Bloque3/dom.html#leer-y-modificar-elementos", + "href": "pages/Bloque3/dom.html#leer-y-modificar-elementos", + "title": "DOM", + "section": "Leer y modificar elementos", + "text": "Leer y modificar elementos\nelement.textContent\nelement.textContent = \"Nuevo texto\"\nelement.classList.add(\"active\")\nelement.classList.remove(\"active\")" + }, + { + "objectID": "pages/Bloque3/dom.html#eventos", + "href": "pages/Bloque3/dom.html#eventos", + "title": "DOM", + "section": "Eventos", + "text": "Eventos\nEl DOM permite reaccionar a acciones del usuario mediante eventos.\nbutton.addEventListener(\"click\", () => {\n // código a ejecutar\n});\nFlujo típico:\nUsuario → Evento → JavaScript → DOM actualizado" + }, + { + "objectID": "pages/Bloque3/dom.html#ejemplo-contador-con-botón", + "href": "pages/Bloque3/dom.html#ejemplo-contador-con-botón", + "title": "DOM", + "section": "Ejemplo: contador con botón", + "text": "Ejemplo: contador con botón\nHTML\n<h1 id=\"count\">0</h1>\n<button id=\"btn\">Sumar 1</button>\nJavaScript\nlet count = 0;\n\nconst countEl = document.querySelector(\"#count\");\nconst btn = document.querySelector(\"#btn\");\n\nbtn.addEventListener(\"click\", () => {\n count++;\n countEl.textContent = count;\n});" + }, + { + "objectID": "pages/Bloque3/dom.html#más-ejemplos", + "href": "pages/Bloque3/dom.html#más-ejemplos", + "title": "DOM", + "section": "Más ejemplos", + "text": "Más ejemplos\nEj1: Show input\nEj2: Par e Impar\nEj3: Toggle\nEj4: Creación dinámica\nEj5: Validación básica" + }, + { + "objectID": "pages/Bloque3/MARef.html", + "href": "pages/Bloque3/MARef.html", + "title": "MA: Uncontrolled fields y useRef", + "section": "", + "text": "Por el momento hemos visto dos hooks useState y useEffect, pero recordemos que en React existen más tipos de hooks que por ser menos útiles y debido a la falta de tiempo no son explicados, no obstante si hay alguno digno de mención es useRef o las referencias.\nUna ref es una referencia mutable que permite acceder directamente a un elemento del DOM o almacenar un valor persistente sin provocar un re-render del componente. El siguiente video ilustra su uso. Es un poco largo pero sirve para repasar los otros hooks.\n\n\nCon las ref podemos introducir los uncontrolled fields que nos permiten trabajar de otra forma con los formularios.\n\nSe prefiere la segunda implementación (la que no utiliza referencias) sobre la primera.", "crumbs": [ "Bloque III Interacción", "Semana 9", - "React III" + "MA: *Uncontrolled fields* y `useRef`" ] }, { - "objectID": "pages/Bloque3/Intermedio.html#ejemplo-con-la-pokeapi", - "href": "pages/Bloque3/Intermedio.html#ejemplo-con-la-pokeapi", - "title": "React III", - "section": "Ejemplo con la Pokeapi", - "text": "Ejemplo con la Pokeapi\nPoke-API\nDownload Code", + "objectID": "pages/Bloque3/t6.html", + "href": "pages/Bloque3/t6.html", + "title": "T6: Romancero Gitano I", + "section": "", + "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado", "crumbs": [ "Bloque III Interacción", - "Semana 9", - "React III" + "Semana 6", + "T6: Romancero Gitano I" ] }, { - "objectID": "pages/Bloque3/intermedio.html#controlled-inputs", - "href": "pages/Bloque3/intermedio.html#controlled-inputs", - "title": "React III", - "section": "Controlled Inputs", - "text": "Controlled Inputs\nMotivación\nHasta ahora se ha trabajado con eventos capturando acciones del usuario.\nSin embargo, al trabajar con formularios surge una cuestión fundamental:\n\n¿Quién controla el valor del input?\n¿El DOM o React?" + "objectID": "pages/Bloque3/t6.html#objetivo-de-la-tarea", + "href": "pages/Bloque3/t6.html#objetivo-de-la-tarea", + "title": "T6: Romancero Gitano I", + "section": "", + "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado", + "crumbs": [ + "Bloque III Interacción", + "Semana 6", + "T6: Romancero Gitano I" + ] }, { - "objectID": "pages/Bloque3/intermedio.html#hooks-repaso", - "href": "pages/Bloque3/intermedio.html#hooks-repaso", - "title": "React III", - "section": "Hooks (Repaso)", - "text": "Hooks (Repaso)\n\nFunción especial que permite modificar las propiedades internas de los componentes\nCaracterísticas avanzadas\nModificación del life-cycle\nNormalmente forma use____" + "objectID": "pages/Bloque3/t6.html#estructura-html", + "href": "pages/Bloque3/t6.html#estructura-html", + "title": "T6: Romancero Gitano I", + "section": "Estructura HTML", + "text": "Estructura HTML\nEl documento HTML debe:\n\nEstar correctamente estructurado (<!DOCTYPE>, <html>, <head>, <body>).\nContener un contenedor principal centrado horizontalmente.\nIncluir, en este orden:\n\nUn elemento para mostrar información métrica del poema (número de estrofas y versos).\nUn elemento para el título del poema.\nUn elemento para el texto del poema, respetando los saltos de verso utilizando la etiqueta <pre>.\nUn botón que permita cambiar de poema.\n\n\nNo debe utilizarse ningún framework ni librería externa.", + "crumbs": [ + "Bloque III Interacción", + "Semana 6", + "T6: Romancero Gitano I" + ] + }, + { + "objectID": "pages/Bloque3/t6.html#javascript", + "href": "pages/Bloque3/t6.html#javascript", + "title": "T6: Romancero Gitano I", + "section": "JavaScript", + "text": "JavaScript\n\nDatos\nEn JavaScript se debe definir un array de objetos, donde cada objeto represente un poema y tenga al menos:\n\nUn título.\nEl texto del poema como una cadena de texto, usando saltos de línea para los versos.\n\nEl cambio de poema debe hacerse recorriendo este array de forma cíclica (cola circular) mediante el botón.\nDescargar poemas (click derecho guardar enlace como)\n\n\nManipulación del DOM\nEl comportamiento de la página debe implementarse exclusivamente con DOM nativo, cumpliendo lo siguiente:\n\nTodas las funciones deben declararse como arrow functions.\nAl pulsar el botón:\n\nSe actualiza el título.\nSe actualiza el texto del poema.\nSe modifica el formato del fondo.\nSe recalculan y muestran:\n\nNúmero de versos.\nNúmero de estrofas (bloques separados por líneas en blanco).\n\n\n\nEl cálculo debe realizarse a partir del texto del poema, no con valores predefinidos.", + "crumbs": [ + "Bloque III Interacción", + "Semana 6", + "T6: Romancero Gitano I" + ] + }, + { + "objectID": "pages/Bloque3/t6.html#css", + "href": "pages/Bloque3/t6.html#css", + "title": "T6: Romancero Gitano I", + "section": "CSS", + "text": "CSS\nLorca utiliza las metáforas y la alegoría como elemento principal sobre el que construye sus poemas, al analizar profundamente descubrimos que siempre recurre a las mismas metáforas.\nEl color no se utiliza aquí solo como elemento decorativo, sino como un recurso semántico: cada color representa un símbolo literario presente en el poema.\nDesde el punto de vista técnico: - Los colores de fondo y de texto deben definirse en clases CSS. - JavaScript no decide colores, únicamente decide qué clase aplicar según el contenido del poema.\n\nPalabras clave y colores asociados\nSe debe detectar el texto del poema las siguientes palabras clave y aplicar el color de fondo correspondiente:\n\nguardia civil → fondo verde militar\nsangre → fondo granate oscuro\ncaballo → fondo color tierra\ncuchillo / navaja → fondo plateado\n\nEl color del texto debe elegirse siempre de forma que exista contraste suficiente con el fondo y se garantice la legibilidad.\nSi el poema contiene varias palabras clave, solo debe aplicarse un único estilo, siguiendo un orden de prioridad definido previamente.\nSi el poema no contiene ninguna de estas palabras, se aplicará un estilo por defecto con colores aleatorios.", + "crumbs": [ + "Bloque III Interacción", + "Semana 6", + "T6: Romancero Gitano I" + ] + }, + { + "objectID": "pages/Bloque3/t6.html#extra-opcional-símbolo-aurora", + "href": "pages/Bloque3/t6.html#extra-opcional-símbolo-aurora", + "title": "T6: Romancero Gitano I", + "section": "Extra opcional: símbolo aurora 🌈", + "text": "Extra opcional: símbolo aurora 🌈\nDe forma voluntaria, se puede añadir el símbolo aurora, que tendrá prioridad absoluta sobre todos los demás.\nCuando el poema contenga la palabra aurora, el fondo debe mostrar un degradado animado.\n\nCSS necesario para el extra\n.aurora {\n background: linear-gradient(120deg,\n #ff005d,\n #ff9f1c,\n #ffee32,\n #3cff00,\n #00e5ff,\n #7a00ff,\n #ff00c8\n );\n background-size: 600% 600%;\n animation: aurora 10s linear infinite;\n color: black;\n}\n\n@keyframes aurora {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}", + "crumbs": [ + "Bloque III Interacción", + "Semana 6", + "T6: Romancero Gitano I" + ] + }, + { + "objectID": "pages/Bloque3/t6.html#consejos", + "href": "pages/Bloque3/t6.html#consejos", + "title": "T6: Romancero Gitano I", + "section": "Consejos", + "text": "Consejos\n\nCentrado de la página (layout clásico)\nToda la página debe estar centrada horizontalmente.\nEl centrado se consigue mediante:\n\nUn contenedor con un ancho máximo definido.\nMárgenes automáticos a izquierda y derecha.\n\nDesde el punto de vista conceptual:\n\nmargin: 0 auto no centra texto, centra bloques.\nEl navegador reparte automáticamente el espacio sobrante a ambos lados del contenedor.\n\n\n\nAnimación del cambio de color\nPara evitar que los cambios de color sean bruscos, se utiliza la propiedad transition en CSS.\nEsta propiedad indica al navegador que los cambios en determinadas propiedades visuales deben hacerse de forma progresiva.\nEjemplo conceptual:\nbody {\n transition: background-color 0.6s, color 0.6s;\n}\nGracias a esta transición: - Cuando JavaScript cambia una clase o un color, - el navegador interpola automáticamente entre el color anterior y el nuevo.\nNo es necesario programar animaciones en JavaScript: CSS se encarga de todo el efecto visual.\n\n\nBúsqueda de una palabra\nPara buscar si determinada palabra determinada se debe utilizar la función includes de la clase string\n\ntexto = \"hoy nieva\";\n\ntexto.includes(\"nieva\"); //TRUE\ntexto.includes(\"llueve\"); //FALSE\n\n\nGeneración del color aleatorio\nPara la generacióndel color aleatorio de puede utilizar la siguiente función\nconst randomColor = () => '#' + Math.floor(Math.random() * 16777215).toString(16);\n\n\nConteo versos y estrofas\nEl recuento de versos y estrofas debe hacerse a partir del texto del poema, no con valores escritos a mano. A continuación se dan algunas pistas técnicas para abordar este problema.\n\nConteo de versos\nUn verso puede considerarse, a efectos prácticos en esta tarea, como una línea de texto no vacía.\nUna estrategia habitual consiste en: - Separar el texto por saltos de línea. - Eliminar las líneas vacías o formadas solo por espacios. - Contar cuántas líneas válidas quedan.\nEjemplo orientativo:\nconst versos = texto\n .split('\\n')\n .filter(linea => linea.trim() !== '')\n .length;\nEste enfoque es suficiente para la mayoría de los poemas del Romancero gitano y evita errores frecuentes.\n\n\nConteo de estrofas\nUna estrofa puede entenderse como un bloque de versos separado de otros bloques por una línea en blanco.\nUna posible estrategia es: - Separar el texto usando dos (o más) saltos de línea consecutivos. - Eliminar bloques vacíos. - Contar los bloques resultantes.\nEjemplo orientativo:\nconst estrofas = texto\n .split(/\\n\\s*\\n/)\n .filter(bloque => bloque.trim() !== '')\n .length;\nEntrega: un único archivo HTML funcional.", + "crumbs": [ + "Bloque III Interacción", + "Semana 6", + "T6: Romancero Gitano I" + ] + }, + { + "objectID": "pages/Bloque3/t6.html#recomendaciones-para-afrontar-la-tarea", + "href": "pages/Bloque3/t6.html#recomendaciones-para-afrontar-la-tarea", + "title": "T6: Romancero Gitano I", + "section": "Recomendaciones para afrontar la tarea", + "text": "Recomendaciones para afrontar la tarea\nAl enfrentarnos a un proyecto de cierta complejitud, el como afrontarlo resulta de cricial para el desarollo del mismo por ello a a continuación dejo un esquema de implementación modular. Sería mejor no utilizarlo, pero puede ser un buen punto de partida si no se sabe como empezar la app, no es el único proceso de implementación válido ni es más correcto que cualquier otro\n\nEstructura de HTML básica contadores de versos y estrofas placeholders de poema y título y botón\nFormateo CSS parte estática: centrado, tamaño (todo lo que no sea color)\nDefinir clases con colores predeterminados\nLógica interna con JS\n\n\nBuscar palabra\nContar estrofas\nConteo versos\nSelección de clase\nGenerar color aleatorio si procede\n\n\nIntegración con DOM", + "crumbs": [ + "Bloque III Interacción", + "Semana 6", + "T6: Romancero Gitano I" + ] }, { +<<<<<<< HEAD "objectID": "pages/Bloque3/intermedio.html#useeffect", "href": "pages/Bloque3/intermedio.html#useeffect", "title": "React III", @@ -546,424 +675,493 @@ "href": "pages/Bloque3/ps.html", "title": "Proyecto Subsistema", >>>>>>> 8e10774 (feat: explicacion semana 10 (#4)) +======= + "objectID": "pages/Bloque3/ps.html", + "href": "pages/Bloque3/ps.html", + "title": "Proyecto Subsistema", +>>>>>>> e3c3469 (feat: varios) "section": "", - "text": "Contenido\nRepaso intensivo de JavaScript, tiene como objetivo dar una introducción del lenguaje, a usuarios que ya tengan experiencia previa programando.\nDescargar archivo de código (click derecho guardar enlace como)", + "text": "Desarrollar una pequeña aplicación web para gestionar una lista de tareas utilizando HTML, CSS y JavaScript, trabajando directamente con el DOM.\nbase", "crumbs": [ - "Bloque II Programación", - "Repaso Intensivo", - "Repaso Intensivo JS" + "Bloque III Interacción", + "Semana 7", + "Proyecto Subsistema" ] }, { - "objectID": "pages/Bloque2/intensivo.html#variables-y-tipos-básicos", - "href": "pages/Bloque2/intensivo.html#variables-y-tipos-básicos", - "title": "Repaso Intensivo JS", - "section": "Variables y tipos básicos", - "text": "Variables y tipos básicos\n\nDeclaración de variables\nEn JavaScript moderno se utilizan let y const (evitar var).\n\nlet: permite reasignación\nconst: no permite reasignación\nconst NO significa inmutable\nJavaScript es de tipado dinámico\nEl tipo depende del valor, no de la variable\n\nTipos primitivos:\n\nstring\nnumber\nboolean\nnull\nundefined\n\nlet edad = 12; // number\nlet altura = 1.8; // number\nlet nombre = \"Javier\"; // string\nlet casado = false; // boolean\n\nlet ordenador = null; // ausencia intencionada de valor\nlet direccion; // undefined\n\n\nUso de const\nconst dni = \"1235678L\";\ndni = \"23\"; // Error\n\nconst no significa inmutable\nconst dni = \"12345678L\";\ndni = \"87654321X\"; // Error\nPero:\nconst arr = [1, 2, 3];\narr.push(4); // permitido\n\n\n\nTipado dinámico\n\nJavaScript es de tipado dinámico\nEl tipo depende del valor, no de la variable\nUna variable puede cambiar de tipo durante la ejecución\n\nlet x = \"hola\";\nx = 42; // válido\nx = true; // válido\nEste comportamiento se conoce como shadowing o cambio dinámico de tipo. En el ejemplo anterior solo existe una variable X cuyo tipo pasa de Number a boolean", + "objectID": "pages/Bloque3/ps.html#objetivo", + "href": "pages/Bloque3/ps.html#objetivo", + "title": "Proyecto Subsistema", + "section": "", + "text": "Desarrollar una pequeña aplicación web para gestionar una lista de tareas utilizando HTML, CSS y JavaScript, trabajando directamente con el DOM.\nbase", "crumbs": [ - "Bloque II Programación", - "Repaso Intensivo", - "Repaso Intensivo JS" + "Bloque III Interacción", + "Semana 7", + "Proyecto Subsistema" ] }, { - "objectID": "pages/Bloque2/intensivo.html#null-vs-undefined", - "href": "pages/Bloque2/intensivo.html#null-vs-undefined", - "title": "Repaso Intensivo JS", - "section": "null vs undefined", - "text": "null vs undefined\n\nundefined: variable declarada pero sin valor\nnull: ausencia intencionada de valor\n\nJavaScript distingue entre:\n\n“todavía no hay valor” y “no hay valor”\n\nconsole.log(ordenador); // null\nconsole.log(direccion); // undefined", + "objectID": "pages/Bloque3/ps.html#qué-se-quiere-hacer", + "href": "pages/Bloque3/ps.html#qué-se-quiere-hacer", + "title": "Proyecto Subsistema", + "section": "Qué se quiere hacer", + "text": "Qué se quiere hacer\n\nCrear una página web que permita añadir tareas.\nCada tarea debe tener:\n\nUn texto descriptivo.\nUn responsable (Software, Hardware, Partners, Otros).\n\nLas tareas deben mostrarse en una lista.\nAl hacer click sobre una tarea, esta debe eliminarse.\nLa página no debe recargarse al añadir o eliminar tareas.", "crumbs": [ - "Bloque II Programación", - "Repaso Intensivo", - "Repaso Intensivo JS" + "Bloque III Interacción", + "Semana 7", + "Proyecto Subsistema" ] }, { - "objectID": "pages/Bloque2/intensivo.html#aritmética-y-operadores", - "href": "pages/Bloque2/intensivo.html#aritmética-y-operadores", - "title": "Repaso Intensivo JS", - "section": "Aritmética y operadores", - "text": "Aritmética y operadores\n\nOperadores aritméticos\nlet a = 12, b = 4;\n\na + b\na - b\na * b\na / b\na % b\na = a + b;\na += b;\na -= b;\na *= b;\n\nPotencias\na**b // Power\nIncrementos:\nb--; b++;\n--b; ++b;\n\n\n\nStrings y concatenación\na = \"hola \";\nb = \"mundo\";\na + b;\n\n\nComparación\n\n== compara valor (evitar)\n=== compara valor y tipo (usar)\n\n\n\nOperadores lógicos\n\n&& AND\n|| OR\n! NOT\n\n\n\nComparaciones\n\n== compara solo valor (evitar)\n=== compara valor y tipo (usar siempre, aunque sea innecesario)\n\n5 == \"5\"; // true\n5 === \"5\"; // false\n\n\nOperadores lógicos\n\n&& AND\n|| OR\n! NOT\n\n(a > 0) && (b < 10)", + "objectID": "pages/Bloque3/ps.html#requisitos-técnicos", + "href": "pages/Bloque3/ps.html#requisitos-técnicos", + "title": "Proyecto Subsistema", + "section": "Requisitos técnicos", + "text": "Requisitos técnicos\n\nLa lógica debe implementarse manipulando el DOM directamente (document.createElement, appendChild, addEventListener, etc.).\nHTML básico para la estructura.\nCSS libre, se espera que se use de forma creativa para mejorar el diseño.\nJavaScript en un archivo separado o en un <script>.", "crumbs": [ - "Bloque II Programación", - "Repaso Intensivo", - "Repaso Intensivo JS" + "Bloque III Interacción", + "Semana 7", + "Proyecto Subsistema" ] }, { - "objectID": "pages/Bloque2/intensivo.html#estructuras-de-control", - "href": "pages/Bloque2/intensivo.html#estructuras-de-control", - "title": "Repaso Intensivo JS", - "section": "Estructuras de control", - "text": "Estructuras de control\n\nCondicionales\nif (a === b) {\n\n} else if (a > b) {\n\n} else {\n\n}\n\n\nBucles\n\nwhile\nlet x = 20;\nwhile (x < 50) {\n x += 10;\n}\n\n\nfor\nfor (let i = 0; i < 10; i++) {\n // iteración\n}", + "objectID": "pages/Bloque3/ps.html#importante", + "href": "pages/Bloque3/ps.html#importante", + "title": "Proyecto Subsistema", + "section": "Importante", + "text": "Importante\n\nLa solución mínima funcional es sencilla.\nSe espera que el alumnado mejore notablemente el aspecto visual usando CSS.\nEl diseño, la usabilidad y la presentación formarán parte de la evaluación.\nAquellos que completen la funcionalidad básica de la tarea podrán preguntarle al profesor como mejorar la tarea o que agregar para ampliar funcionalidades", "crumbs": [ - "Bloque II Programación", - "Repaso Intensivo", - "Repaso Intensivo JS" + "Bloque III Interacción", + "Semana 7", + "Proyecto Subsistema" ] }, { - "objectID": "pages/Bloque2/intensivo.html#funciones", - "href": "pages/Bloque2/intensivo.html#funciones", - "title": "Repaso Intensivo JS", - "section": "Funciones", - "text": "Funciones\n\nEncapsulan lógica reutilizable\nPueden recibir parámetros\nPueden devolver valores\nSon ciudadanos de primera clase\n\n\nFunción clásica\nfunction sumar2(num, num2 = 2) {\n num += num2;\n return num;\n}\nPaso de variables por valor:\nlet a = 7;\nlet b = sumar2(a, a); // 14\na; // 7\n\n\nFunciones flecha y orden superior\nconst concatenarHola = input => input + \" Hola\";\nconcatenarHola(\"sdf\");\nfunction ejecuta(fun) {\n fun();\n}\n\nejecuta(() => { console.log(\"hola\"); });\n\n\nFunciones propias de strings\nlet a = \"jsadfsadf \";\na.trim(); // Suprimir espacios adicionales\na.split('a'); // Divide el string en un array c\na.length;\n\n\nFunciones flecha\nconst cuadrado = n => n ** 2;\nForma extendida:\nconst cuadrado = (n) => {\n return n ** 2;\n};\n\n\nFunciones como ciudadanos de primera clase\nLas funciones pueden:\n\nAsignarse a variables\nPasarse como argumentos\nDevolverse como resultado\n\nfunction ejecutar(f) {\n f();\n}\n\nejecutar(() => console.log(\"Hola\"));", + "objectID": "pages/Bloque3/ps.html#no-es-necesario", + "href": "pages/Bloque3/ps.html#no-es-necesario", + "title": "Proyecto Subsistema", + "section": "No es necesario", + "text": "No es necesario\n\nGuardar las tareas al recargar la página.\nAutenticación de usuarios.\nBase de datos o backend.", "crumbs": [ - "Bloque II Programación", - "Repaso Intensivo", - "Repaso Intensivo JS" + "Bloque III Interacción", + "Semana 7", + "Proyecto Subsistema" ] }, { - "objectID": "pages/Bloque2/intensivo.html#arrays-base", - "href": "pages/Bloque2/intensivo.html#arrays-base", - "title": "Repaso Intensivo JS", - "section": "Arrays (base)", - "text": "Arrays (base)\n\nLista ordenada\nÍndices empiezan en 0\nPropiedad length\n\nlet cajon = [8, \"hola\", true, () => { return 7 }];\n\nAcceso\ncajon[0] // 8\ncajon[2] = \"rino\"; // modificamos la entrada 2 \n\n\nAdiciones\ncajon.push(false);\ncajon.unshift(0);\n\n\nEliminaciones\ncajon.pop();\ncajon.shift();\ncajon.length;", - "crumbs": [ + "objectID": "pages/Bloque3/ps.html#entregable", + "href": "pages/Bloque3/ps.html#entregable", + "title": "Proyecto Subsistema", + "section": "Entregable", + "text": "Entregable\n\nArchivos index.html, script.js y style.css.\nEl proyecto debe poder abrirse directamente en el navegador.", + "crumbs": [ + "Bloque III Interacción", + "Semana 7", + "Proyecto Subsistema" + ] + }, + { + "objectID": "pages/Bloque2/MAclases.html", + "href": "pages/Bloque2/MAclases.html", + "title": "MA: Clases ES6", + "section": "", + "text": "Contenido\nRepaso intensivo de clases en JavaScript (ES6+), orientado a usuarios con experiencia previa en programación y familiarizados con funciones, objetos y arrays.", + "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "Repaso Intensivo JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/intensivo.html#objetos", - "href": "pages/Bloque2/intensivo.html#objetos", - "title": "Repaso Intensivo JS", - "section": "Objetos", - "text": "Objetos\nUn objeto representa una entidad mediante estructura clave–valor.\nlet gente = { pepe: 7, juanes: 8, andreas: 10, fran: [4, 2] };\n\nModificación\ngente.andreas = 32;\ngente.pepe++;\n\n\nAcceso dinámico\nlet nombre = \"pablo\";\n\ngente.nombre; // undefined\ngente[nombre] = 2; // añade propiedad", + "objectID": "pages/Bloque2/MAclases.html#programación-orientada-a-objetos-en-javascript", + "href": "pages/Bloque2/MAclases.html#programación-orientada-a-objetos-en-javascript", + "title": "MA: Clases ES6", + "section": "Programación orientada a objetos en JavaScript", + "text": "Programación orientada a objetos en JavaScript\nJavaScript es un lenguaje basado en prototipos, pero desde ES6 introduce la sintaxis class, que:\n\nEs azúcar sintáctico sobre el sistema de prototipos\nFacilita la escritura y lectura de código OO\nNo convierte a JS en un lenguaje basado en clases clásicas", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "Repaso Intensivo JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/intensivo.html#referencias-vs-valores", - "href": "pages/Bloque2/intensivo.html#referencias-vs-valores", - "title": "Repaso Intensivo JS", - "section": "Referencias vs valores", - "text": "Referencias vs valores\n\nCopia por valor\nlet a = 5;\nlet b = a;\nb++;\na no cambia.\n\n\nCopia por referencia\nlet e3 = [\"juan\", \"pepe\"];\nlet d = e3;\n\nd.push(\"andrés\");\nAmbas variables apuntan al mismo array.\nconst poblacion = gente;\npoblacion[\"julio\"] = 8;\nLa copia por refencia se aplica a objetos y arrays\nlet x = [\"juan\", \"pepe\"];\nlet y = x;\n\ny.push(\"andrés\"); // Se añade en x e y pues son el mismo objeto\nAmbas variables apuntan al mismo objeto.", + "objectID": "pages/Bloque2/MAclases.html#definición-de-una-clase", + "href": "pages/Bloque2/MAclases.html#definición-de-una-clase", + "title": "MA: Clases ES6", + "section": "Definición de una clase", + "text": "Definición de una clase\n\nSintaxis básica\nclass Persona {\n constructor(nombre, edad) {\n this.nombre = nombre;\n this.edad = edad;\n }\n}\n\nclass: palabra clave\nconstructor: método especial de inicialización\nthis: referencia a la instancia actual", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "Repaso Intensivo JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/intensivo.html#spread-operator-...", - "href": "pages/Bloque2/intensivo.html#spread-operator-...", - "title": "Repaso Intensivo JS", - "section": "Spread operator (...)", - "text": "Spread operator (...)\n\nExpande arrays u objetos\nPermite copiar y combinar\nCopia superficial\n\n\nArrays\nJavier es añadido a arr2, pero no a arr.\nlet arr = [\"Alice\", \"Bob\", \"Kevin\"];\nlet arr2 = [...arr, \"Javier\"];\n\n\nObjetos\nOcurre lo mismo con los objetos\nconst sociedad = { ...poblacion, julia: 12 };", + "objectID": "pages/Bloque2/MAclases.html#creación-de-instancias", + "href": "pages/Bloque2/MAclases.html#creación-de-instancias", + "title": "MA: Clases ES6", + "section": "Creación de instancias", + "text": "Creación de instancias\nconst p1 = new Persona(\"Javier\", 45);\nconst p2 = new Persona(\"Ana\", 32);\n\nnew crea un nuevo objeto\nEjecuta automáticamente constructor", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "Repaso Intensivo JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/intensivo.html#funciones-de-array-js-moderno", - "href": "pages/Bloque2/intensivo.html#funciones-de-array-js-moderno", - "title": "Repaso Intensivo JS", - "section": "Funciones de array (JS moderno)", - "text": "Funciones de array (JS moderno)\nVamos a trabajar con un ejemplo completo, típico en programación funcional.\n\nDatos de partida\nlet y = [2, 4, 6, 7];\n\n\nFunción cuadrado\nDefinimos una función que, dado un número, devuelve su cuadrado:\nconst cuadrado = n => n ** 2;\nEs equivalente a:\nconst cuadrado = (n) => {\n return n ** 2;\n};\n\n\nmap: transformar elementos\nAplicamos map para obtener un nuevo array con los cuadrados:\nconst y2 = y.map(cuadrado);\nResultado:\n[4, 16, 36, 49]\n\n\nfilter: seleccionar elementos\nDefinimos una función que comprueba si un número es par:\nconst even = n => n % 2 === 0;\nLa usamos con filter:\nconst yEven = y.filter(even);\n\n\nEncadenamiento (estilo declarativo)\nPodemos encadenar ambas operaciones:\ny\n .map(n => n ** 2)\n .filter(n => n % 2 === 0);\n\nEste estilo es declarativo: describimos qué queremos hacer con los datos, no cómo recorrerlos.", + "objectID": "pages/Bloque2/MAclases.html#métodos-de-instancia", + "href": "pages/Bloque2/MAclases.html#métodos-de-instancia", + "title": "MA: Clases ES6", + "section": "Métodos de instancia", + "text": "Métodos de instancia\nLos métodos se definen sin function y se comparten vía prototipo.\nclass Persona {\n constructor(nombre, edad) {\n this.nombre = nombre;\n this.edad = edad;\n }\n\n saludar() {\n return `Hola, soy ${this.nombre}`;\n }\n\n cumple() {\n this.edad++;\n }\n}\nUso:\np1.saludar();\np1.cumple();", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "Repaso Intensivo JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/ti.html", - "href": "pages/Bloque2/ti.html", - "title": "TI: Ejercicios JS", - "section": "", - "text": "El objetivo de estos ejercicios es repasar aquellas funcionalidades de JavaScript que difieren del resto de lenguajes de programación empirica, por lo que los siguentes ejercicios de DEBEN DE RESOLVER SIN UTILIZAR NINGUNA CONDICIONAL NI NINGÚN BUCLE.\nPrincipalmente trabajarás con:\nDebe de realizar la tarea enun archivo js, para comprobar el resultado debe de ejecutar desde la terminal con node nombreArchivo.js.", + "objectID": "pages/Bloque2/MAclases.html#métodos-vs-funciones-flecha", + "href": "pages/Bloque2/MAclases.html#métodos-vs-funciones-flecha", + "title": "MA: Clases ES6", + "section": "Métodos vs funciones flecha", + "text": "Métodos vs funciones flecha\nNo usar arrow functions como métodos de clase (salvo casos concretos):\nclass MalEjemplo {\n metodo = () => {\n console.log(this);\n };\n}\n\nRompe el modelo prototípico\nMayor consumo de memoria", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TI: Ejercicios JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/ti.html#ejercicio-1", - "href": "pages/Bloque2/ti.html#ejercicio-1", - "title": "TI: Ejercicios JS", - "section": "Ejercicio 1", - "text": "Ejercicio 1\nDefina un array llamado arrOriginal con el siguiente contenido numérico. Este array será el origen de datos para los ejercicios posteriores, salvo que se indique lo contrario.\n3, 4, 2, 4, 4, 5, 12, 24, 3, 23, 232, 2, -3, -9, 2, -23, 200, -23, 12, 43, 4, -32, -32, 0, 23, 23", + "objectID": "pages/Bloque2/MAclases.html#propiedades-públicas", + "href": "pages/Bloque2/MAclases.html#propiedades-públicas", + "title": "MA: Clases ES6", + "section": "Propiedades públicas", + "text": "Propiedades públicas\nLas propiedades se suelen declarar en el constructor:\nclass Coche {\n constructor(marca, km = 0) {\n this.marca = marca;\n this.km = km;\n }\n}\nUso:\nconst c = new Coche(\"Toyota\");\nc.km += 100;", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TI: Ejercicios JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/ti.html#ejercicio-2", - "href": "pages/Bloque2/ti.html#ejercicio-2", - "title": "TI: Ejercicios JS", - "section": "Ejercicio 2", - "text": "Ejercicio 2\nPartiendo del array arrOriginal, imprima por pantalla la siguiente frase:\n\n\"En el subsistema de software somos x miembros\"\n\ndonde x debe tomar, sucesivamente, cada uno de los valores de arrOriginal.\nImprima por pantalla el resultado.\n\nSalida esperada (ejemplo):\n\nEn el subsistema de software somos 3 miembros\nEn el subsistema de software somos 4 miembros\nEn el subsistema de software somos 2 miembros", + "objectID": "pages/Bloque2/MAclases.html#getters-y-setters", + "href": "pages/Bloque2/MAclases.html#getters-y-setters", + "title": "MA: Clases ES6", + "section": "Getters y setters", + "text": "Getters y setters\nPermiten acceder como propiedades a lógica encapsulada.\nclass Rectangulo {\n constructor(ancho, alto) {\n this.ancho = ancho;\n this.alto = alto;\n }\n\n get area() {\n return this.ancho * this.alto;\n }\n\n set escala(factor) {\n this.ancho *= factor;\n this.alto *= factor;\n }\n}\nUso:\nconst r = new Rectangulo(2, 3);\nr.area; // 6\nr.escala = 2;\nr.area; // 24", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TI: Ejercicios JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/ti.html#ejercicio-3", - "href": "pages/Bloque2/ti.html#ejercicio-3", - "title": "TI: Ejercicios JS", - "section": "Ejercicio 3", - "text": "Ejercicio 3\nPartiendo de arrOriginal, cree un nuevo array llamado arrPositivos que contenga únicamente números positivos.\nUtilice arrPositivos para imprimir por pantalla las frases correspondientes.", + "objectID": "pages/Bloque2/MAclases.html#herencia-extends", + "href": "pages/Bloque2/MAclases.html#herencia-extends", + "title": "MA: Clases ES6", + "section": "Herencia (extends)", + "text": "Herencia (extends)\nJavaScript soporta herencia simple.\nclass Empleado extends Persona {\n constructor(nombre, edad, salario) {\n super(nombre, edad);\n this.salario = salario;\n }\n\n salarioAnual() {\n return this.salario * 12;\n }\n}\n\nextends: herencia\nsuper(): llama al constructor padre (obligatorio)", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TI: Ejercicios JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/ti.html#ejercicio-4", - "href": "pages/Bloque2/ti.html#ejercicio-4", - "title": "TI: Ejercicios JS", - "section": "Ejercicio 4", - "text": "Ejercicio 4\nPartiendo de arrPositivos, cree un nuevo array llamado arrValidos que cumpla además el siguiente criterio:\n\nEl número máximo de personas es 10\n\nImprima por pantalla las frases correspondientes a arrValidos.", + "objectID": "pages/Bloque2/MAclases.html#sobrescritura-de-métodos", + "href": "pages/Bloque2/MAclases.html#sobrescritura-de-métodos", + "title": "MA: Clases ES6", + "section": "Sobrescritura de métodos", + "text": "Sobrescritura de métodos\nclass Empleado extends Persona {\n saludar() {\n return `Empleado: ${this.nombre}`;\n }\n}\n\nSi el método existe en la clase hija, sobrescribe al del padre", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TI: Ejercicios JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/ti.html#ejercicio-5", - "href": "pages/Bloque2/ti.html#ejercicio-5", - "title": "TI: Ejercicios JS", - "section": "Ejercicio 5", - "text": "Ejercicio 5\nPartiendo nuevamente de arrOriginal, cree un nuevo array llamado arrFiltrado que contenga únicamente aquellos elementos que cumplan todas las siguientes condiciones:\n\nSean positivos\n\nSean pares\n\nSean menores que 100", + "objectID": "pages/Bloque2/MAclases.html#uso-de-super-en-métodos", + "href": "pages/Bloque2/MAclases.html#uso-de-super-en-métodos", + "title": "MA: Clases ES6", + "section": "Uso de super en métodos", + "text": "Uso de super en métodos\nclass Empleado extends Persona {\n saludar() {\n return super.saludar() + \" (empleado)\";\n }\n}\nPermite reutilizar lógica del padre.", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TI: Ejercicios JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/ti.html#ejercicio-6", - "href": "pages/Bloque2/ti.html#ejercicio-6", - "title": "TI: Ejercicios JS", - "section": "Ejercicio 6", - "text": "Ejercicio 6\nPartiendo de arrFiltrado:\n\nCree un nuevo array llamado arrCubos elevando al cubo cada uno de sus elementos\n\nA partir de arrCubos, cree un nuevo array llamado arrCubosFiltrados que contenga únicamente aquellos valores cuyo resultado termine en 0.", + "objectID": "pages/Bloque2/MAclases.html#métodos-estáticos", + "href": "pages/Bloque2/MAclases.html#métodos-estáticos", + "title": "MA: Clases ES6", + "section": "Métodos estáticos", + "text": "Métodos estáticos\nPertenecen a la clase, no a las instancias.\nclass Utilidades {\n static suma(a, b) {\n return a + b;\n }\n}\nUso:\nUtilidades.suma(2, 3);\nNo accesible desde instancias:\nnew Utilidades().suma; // undefined", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TI: Ejercicios JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/ti.html#ejercicio-7", - "href": "pages/Bloque2/ti.html#ejercicio-7", - "title": "TI: Ejercicios JS", - "section": "Ejercicio 7", - "text": "Ejercicio 7\nPartiendo de arrCubosFiltrados, cree un nuevo array llamado arrFinal añadiendo el valor 21.", + "objectID": "pages/Bloque2/MAclases.html#campos-privados", + "href": "pages/Bloque2/MAclases.html#campos-privados", + "title": "MA: Clases ES6", + "section": "Campos privados (#)", + "text": "Campos privados (#)\nIntroducidos en ES2022.\nclass Cuenta {\n #saldo = 0;\n\n ingresar(cantidad) {\n this.#saldo += cantidad;\n }\n\n getSaldo() {\n return this.#saldo;\n }\n}\n\n#saldo es realmente privado\nNo accesible fuera de la clase", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TI: Ejercicios JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque2/ti.html#ejercicio-8", - "href": "pages/Bloque2/ti.html#ejercicio-8", - "title": "TI: Ejercicios JS", - "section": "Ejercicio 8", - "text": "Ejercicio 8\nPartiendo de arrFinal, cree un nuevo array independiente llamado arrCopia, de forma que cualquier modificación posterior no afecte a arrFinal.", + "objectID": "pages/Bloque2/MAclases.html#clases-y-objetos-literales", + "href": "pages/Bloque2/MAclases.html#clases-y-objetos-literales", + "title": "MA: Clases ES6", + "section": "Clases y objetos literales", + "text": "Clases y objetos literales\nEsto:\nconst a = {\n x: 1,\n inc() { this.x++; }\n};\nEs equivalente conceptualmente a una instancia única.\nUsar class cuando:\n\nHay múltiples instancias\nExiste estado y comportamiento común\nSe necesita herencia o abstracción", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TI: Ejercicios JS" + "MA: Clases ES6" ] }, { - "objectID": "pages/rubric.html", - "href": "pages/rubric.html", - "title": "Rúbrica de evaluación", - "section": "", - "text": "Durante el curso seguiremos la siguiente rúbrica para la calificación de las tareas. A pesar de que las calificaciones no son importantes, la rúbrica es un buen recordatorio de que aspectos hay que tener en cuenta en la programación web.\n\n\n\nPuntuación\n\n\nNo aplica\n\n\nDeficiente(0–4)\n\n\nInsuficiente(4–5)\n\n\nAceptable(5–7)\n\n\nBueno(7–9)\n\n\nExcelente(9–10)\n\n\n\n\nDiseño\n\n\nNo aplica.\n\n\nDiseño desordenado y/o con problemas de visualización funcional.\n\n\nDiseño básico pero con problemas de visualización o estructura.\n\n\nDiseño claro y ordenado, cumple los requisitos básicos.\n\n\nDiseño cuidado, buena estética y estructura clara.\n\n\nDiseño profesional, limpio, pulido y sobresaliente.\n\n\n\n\nProgramación\n\n\nNo aplica.\n\n\nCódigo incompleto o con errores graves.\n\n\nCódigo funcional parcialmente y/o con errores importantes.\n\n\nCódigo funcional y adecuado a la tarea.\n\n\nCódigo bien estructurado con mejoras respecto a lo exigido.\n\n\nCódigo impecable, eficiente y muy bien organizado.\n\n\n\n\nEsfuerzo e implicación\n\n\nNo aplica.\n\n\nBajo esfuerzo o dedicación mínima.\n\n\nEsfuerzo adecuado pero limitado.\n\n\nEsfuerzo notable, cumple con lo requerido.\n\n\nEsfuerzo claro, trabajo más allá de lo solicitado.\n\n\nDedicación sobresaliente y trabajo excepcional.\n\n\n\n\nDocumentación / Claridad\n\n\nNo aplica.\n\n\nDocumentación mínima o inexistente.\n\n\nDocumentación incompleta o confusa.\n\n\nDocumentación clara y suficiente.\n\n\nDocumentación bien presentada y detallada.\n\n\nDocumentación excelente y altamente profesional.\n\n\n\n\nFuncionalidad\n\n\nNo aplica.\n\n\nNo funciona o no cumple objetivos.\n\n\nFunciona de forma parcial.\n\n\nFunciona correctamente.\n\n\nFunciona con mejoras o funcionalidades extra.\n\n\nFunciona perfectamente y supera expectativas.\n\n\n\n\nInnovación\n\n\n(Nota extra)\n\n\n\n\nTOTAL:\n\n\n\n\n/60\n\n\n\n\nObservaciones:\n\n\n\n\n\nLa nota total será sobre 60 si hay algun criterio que no se aplique, se modificará la nota para que esté sobre base 60.", + "objectID": "pages/Bloque2/MAclases.html#clases-prototípicas-pre-es6", + "href": "pages/Bloque2/MAclases.html#clases-prototípicas-pre-es6", + "title": "MA: Clases ES6", + "section": "Clases prototípicas (pre-ES6)", + "text": "Clases prototípicas (pre-ES6)\nJavaScript siempre ha sido un lenguaje basado en prototipos. Antes de ES6, la creación de objetos y herencia se realizaba mediante funciones constructoras y el prototipo.\nEn este repaso no entraremos en detalle en este modelo.\nBasta con saber que:\n\nLas clases ES6 no sustituyen al modelo prototípico\nSon una capa de abstracción sobre él\nTodo el comportamiento sigue resolviéndose vía prototipos\n\nPara profundizar:\n\nhttps://developer.mozilla.org/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\n\nfunction Persona(nombre) {\nthis.nombre = nombre;\n}\n\nPersona.prototype.saludar = function () {\nreturn this.nombre;\n};\nvs\nclass Persona {\n constructor(nombre) {\n this.nombre = nombre;\n }\n\n saludar() {\n return this.nombre;\n }\n}", "crumbs": [ - "Rúbrica de evaluación" + "Bloque II Programación", + "Repaso Intensivo", + "MA: Clases ES6" ] }, { - "objectID": "pages/Bloque1/entorno.html", - "href": "pages/Bloque1/entorno.html", - "title": "Preparación del entorno de trabajo", + "objectID": "pages/Bloque2/tia.html", + "href": "pages/Bloque2/tia.html", + "title": "TAI: La objetización de las personas", "section": "", - "text": "Contenido", + "text": "El objetivo de esta tarea es aplicar los conocimientos básicos de programación orientada a objetos en JavaScript, haciendo uso de las clases definidas en ES6. En particular, se evaluará el uso de:\n\nherencia entre clases\nencapsulación mediante propiedades privadas\ngetters y setters usando las palabras clave get y set\nmétodos estáticos\nvalidación de datos\n\nPara ello se definirá una jerarquía de clases que represente un equipo de Hyperloop.", "crumbs": [ - "Bloque I Introducción", - "Semana 0", - "Preparación del entorno de trabajo" + "Bloque II Programación", + "Repaso Intensivo", + "TAI: La objetización de las personas" ] }, { - "objectID": "pages/Bloque1/entorno.html#ide", - "href": "pages/Bloque1/entorno.html#ide", - "title": "Preparación del entorno de trabajo", - "section": "IDE", - "text": "IDE\n\n¿Qué es una IDE?\nLas Integrated development environment (IDE) son aplicaciones diseñadas para facilitar la programación a los programadores.\nAunque no hay una lista de características propias de las IDE, suelen tener características comunes, por ejemplo:\n\nDebugger integrado en la interfaz\nGestor de archivos\nEditor de código inteligente: autocompletados\n\n\n\n¿Cuántas IDE existen?\n\nAndroid Studio\nRStudio\nEclipse\n\n\n\n¿Qué IDE utilizaremos nosotros?\nPrincipalmente trabajaremos con VSCode una IDE de proposito general que configuraremos para el desarrollo frontend\n\nInstalación de VScode\n\nEnlace\n\n\nFamiliarizarse con VSCode\n\nBarra lateral:\n\nExplorador de archivos\nMenú de Git\nMenú de extensiones\nBuscar\nDebugger\n\nEditor o área de edición: componente más importante de la IDE, lugar donde se escribe el código.\n\n\n\nExtensiones\nLas extensiones son aplicaciones software desarolladas por empresas o por particulares para modificar o agregar una nueva funcionalidad a las IDE. Pueden ir desde pequeñas modificaciones del tema o de la UI, o incorporar nuevas funcionalidades como la interacción con bases de datos.\n\nLiveServer\nNosotros para el transcurso del curso utilizaremos la extensión Liveserver que nos permitirá desplegar comodamente un pequeño servidor para la programación con HTML (Ahondaremos más la próxima semana)\n\nInstalación de LiveServer\n\n\nEntrar en el menú de extensiones\nBuscar por liveserver\nSeleccionar extensión\nInstalar\n\n\nAl concluir la instalación debería de aparecer en la parte derecha de la barra de estado (barra interior)", + "objectID": "pages/Bloque2/tia.html#objetivo-de-la-tarea", + "href": "pages/Bloque2/tia.html#objetivo-de-la-tarea", + "title": "TAI: La objetización de las personas", + "section": "", + "text": "El objetivo de esta tarea es aplicar los conocimientos básicos de programación orientada a objetos en JavaScript, haciendo uso de las clases definidas en ES6. En particular, se evaluará el uso de:\n\nherencia entre clases\nencapsulación mediante propiedades privadas\ngetters y setters usando las palabras clave get y set\nmétodos estáticos\nvalidación de datos\n\nPara ello se definirá una jerarquía de clases que represente un equipo de Hyperloop.", "crumbs": [ - "Bloque I Introducción", - "Semana 0", - "Preparación del entorno de trabajo" + "Bloque II Programación", + "Repaso Intensivo", + "TAI: La objetización de las personas" ] }, { - "objectID": "pages/Bloque1/entorno.html#node.js-y-npm", - "href": "pages/Bloque1/entorno.html#node.js-y-npm", - "title": "Preparación del entorno de trabajo", - "section": "Node.JS y NPM", - "text": "Node.JS y NPM\n\n¿Qué es node JS?\nNode.js es un entorno de ejecución de JavaScript basado en el motor V8 de Google Chrome.\nPermite ejecutar código JavaScript directamente en el sistema operativo, sin depender de un navegador.\nDe este modo, el mismo lenguaje puede usarse tanto en el frontend como en el backend.\n\n\n¿Qué es NPM?\nNPM (Node Package Manager) es el gestor de paquetes de Node.js.\nFacilita la instalación, actualización y gestión de librerías que amplían las funcionalidades de los proyectos.\nDescarga node y npm nodejs.org", + "objectID": "pages/Bloque2/tia.html#entregar", + "href": "pages/Bloque2/tia.html#entregar", + "title": "TAI: La objetización de las personas", + "section": "Entregar", + "text": "Entregar\nSe debe entregar un único archivo de JavaScript (.js) que contenga la solución completa a la tarea.", "crumbs": [ - "Bloque I Introducción", - "Semana 0", - "Preparación del entorno de trabajo" + "Bloque II Programación", + "Repaso Intensivo", + "TAI: La objetización de las personas" ] }, { - "objectID": "pages/Bloque1/entorno.html#git-y-github", - "href": "pages/Bloque1/entorno.html#git-y-github", - "title": "Preparación del entorno de trabajo", - "section": "Git y GitHub", - "text": "Git y GitHub\n\n¿Qué es Git?\nGit es un sistema de control de versiones distribuido. Permite registrar los cambios de un proyecto, volver a versiones anteriores y trabajar de forma colaborativa sin sobrescribir el trabajo de otros. Cada usuario dispone de una copia completa del repositorio, lo que facilita el trabajo sin conexión.\n\n\n¿Qué es GitHub?\nGitHub es una plataforma en la nube que utiliza Git para almacenar y gestionar proyectos. Permite compartir código, colaborar con otros desarrolladores y mantener un control de versiones centralizado.\n\n\nGit frente GitHub\n\nGit es la herramienta de control de versiones.(Software Libre, Linux Fundation)\nGitHub es la plataforma online donde se alojan los repositorios y se facilita el trabajo en equipo. (Coporativa Microsoft)\n\n\n\nUso de Git y GitHub\nEn Hyperloop UPV, tanto en los subsistemas de Software y Firmware utilizamos GitHub como herramienta de gestión de código.\nNosotros en el TC, también trataremos de facilitarnos con esta herramienta\n\n\nInstalación de Git y Cuenta de GitHub\n\nInstalación de Git\nCuenta de GitHub\n\n\n\nDiagrama de trabajo de Git\n\n\nGit en VScode", + "objectID": "pages/Bloque2/tia.html#realización-de-la-tarea", + "href": "pages/Bloque2/tia.html#realización-de-la-tarea", + "title": "TAI: La objetización de las personas", + "section": "Realización de la tarea", + "text": "Realización de la tarea\nEl archivo JavaScript debe estar claramente dividido en dos partes:\n\nla implementación de clases, donde se definirán todas las clases necesarias\n\nla zona de uso, donde se utilizarán las clases previamente definidas\n\n\nImplementación de clases\nTodas las clases deberán definirse utilizando la sintaxis de clases ES6, haciendo uso correcto de:\n\nclass\nextends\nsuper\npropiedades privadas (usando #)\ngetters y setters (get y set)\nmétodos estáticos\n\n\nClase Person\nDebe contener:\n\npropiedad privada name\npropiedad privada dni\nSe puede obtener tanto el nombre como el DNI, pero solo se puede modificar el nombre\nEl constructor recibirá:\n\nun nombre\nun NÚMERO de DNI\n\nEl constructor deberá calcular automáticamente la letra del DNI siguiendo el algoritmo oficial:\nhttps://www.interior.gob.es/opencms/es/servicios-al-ciudadano/tramites-y-gestiones/dni/calculo-del-digito-de-control-del-nif-nie/\nMétodos y accesos:\n\ngetter name\nsetter name\ngetter dni\nmétodo getInfo() que devuelva un string con el nombre y el DNI completo\n\nSi los datos introducidos no son válidos, se lanzará un Error\n\n\n\nClase Member (clase hija de Person)\nRepresenta a un miembro del equipo de Hyperloop.\nDebe contener:\n\npropiedad privada department\npropiedad privada yearsExperience\n\n\nDepartamentos válidos\nLos únicos departamentos permitidos son:\n\n\"Managment\"\n\"Operaciones\"\n\"Avionics\"\n\"Electromagnetics\"\n\"Mechanics\"\n\nNo se permitirá ningún otro valor.\n\n\nRequisitos adicionales\n\nLa propiedad department:\n\nse accederá mediante:\n\ngetter department\nsetter department\n\n\nEl setter validará que el departamento sea válido\nyearsExperience debe ser un número mayor o igual que 0\n\n\n\nMétodo estático obligatorio\nLa clase Member debe incluir el siguiente método estático:\n\nisValidDepartment(department)\n\ndevuelve true si el departamento es válido\ndevuelve false en caso contrario\ndeberá utilizarse tanto en el constructor como en el setter de department\n\n\n\n\nMétodos públicos\n\ngetter yearsExperience\nmétodo getInfo():\n\nsobrescribe el método de Person\nincluye el departamento y los años de experiencia\n\n\n\n\n\nClase Engineer (clase hija de Member)\nRepresenta a un ingeniero del equipo.\nDebe contener:\n\npropiedad privada specialty\nLa especialidad será un string no vacío\n\n\nAccesos y métodos\n\ngetter specialty\nmétodo getInfo():\n\nsobrescribe el método anterior\nincluye la especialidad del ingeniero\n\n\n\n\n\nClase Team\nRepresenta el equipo completo de Hyperloop.\nDebe contener:\n\npropiedad privada members, que será un array de objetos Member\n\n\nMétodos públicos\n\naddMember(member)\n\nsolo permite añadir objetos que sean instancia de Member\n\nremoveMemberByDni(dni)\nlistMembers()\n\nmuestra por consola la información de todos los miembros del equipo\n\ncountMembersByDepartment(department)\n\ndevuelve cuántos miembros pertenecen a un determinado departamento\n\n\n\n\n\n\nZona de uso\nEn la zona de uso del archivo JavaScript se debe:\n\nCrear al menos:\n\n2 objetos Engineer de departamentos distintos\n1 objeto Member que no sea ingeniero\n\nCrear un objeto Team\nAñadir los miembros al equipo\nUtilizar explícitamente:\n\ngetters\nsetters\nel método estático de validación\n\nMostrar por consola:\n\nel listado completo del equipo\nel número de miembros por departamento\n\nProbar al menos un caso incorrecto:\n\npor ejemplo, asignar un departamento no válido\no intentar añadir un objeto que no sea Member\n\nDemostrar que el error se gestiona correctamente", "crumbs": [ - "Bloque I Introducción", - "Semana 0", - "Preparación del entorno de trabajo" + "Bloque II Programación", + "Repaso Intensivo", + "TAI: La objetización de las personas" ] }, { - "objectID": "pages/Bloque1/entorno-reveal.html#ide", - "href": "pages/Bloque1/entorno-reveal.html#ide", - "title": "Preparación del entorno de trabajo", - "section": "IDE", - "text": "IDE\n¿Qué es una IDE?\nLas Integrated development environment (IDE) son aplicaciones diseñadas para facilitar la programación a los programadores.\nAunque no hay una lista de características propias de las IDE, suelen tener características comunes, por ejemplo:\n\nDebugger integrado en la interfaz\nGestor de archivos\nEditor de código inteligente: autocompletados" + "objectID": "pages/Bloque2/tia.html#apéndice-comprobaciones-y-errores-en-javascript-necesario-para-la-tarea", + "href": "pages/Bloque2/tia.html#apéndice-comprobaciones-y-errores-en-javascript-necesario-para-la-tarea", + "title": "TAI: La objetización de las personas", + "section": "Apéndice: comprobaciones y errores en JavaScript (NECESARIO PARA LA TAREA)", + "text": "Apéndice: comprobaciones y errores en JavaScript (NECESARIO PARA LA TAREA)\nEn el desarrollo de la tarea pueden aparecer algunas comprobaciones y mecanismos de control de errores que es necesario saber implementar por cuenta propia. Su inclusión tiene como objetivo facilitar la robustez del código, y forman parte de los contenidos evaluables de la tarea.\n\nUso de Error\nCuando se detecta una situación incorrecta (por ejemplo, un valor no válido o un uso indebido de una clase), se puede lanzar un error utilizando:\nthrow new Error(\"Mensaje de error\");\nEsto indica claramente que algo no es correcto y detiene la ejecución normal del programa.\n\n\nUso de instanceof\nEl operador instanceof se utiliza para comprobar si un objeto ha sido creado a partir de una clase concreta.\nobjeto instanceof Clase\nDevuelve true si el objeto pertenece a esa clase y false en caso contrario.\n\n\nUso de typeof\nEl operador typeof permite comprobar el tipo de datos simples como strings o números.\ntypeof variable\nEjemplos:\ntypeof \"texto\" // \"string\"\ntypeof 10 // \"number\"\nSe utiliza para validar los datos recibidos por constructores o setters. Para comprobar clases u objetos personalizados debe usarse instanceof, no typeof.", + "crumbs": [ + "Bloque II Programación", + "Repaso Intensivo", + "TAI: La objetización de las personas" + ] }, { - "objectID": "pages/Bloque1/entorno-reveal.html#node.js-y-npm", - "href": "pages/Bloque1/entorno-reveal.html#node.js-y-npm", - "title": "Preparación del entorno de trabajo", - "section": "Node.JS y NPM", - "text": "Node.JS y NPM\n¿Qué es node JS?\nNode.js es un entorno de ejecución de JavaScript basado en el motor V8 de Google Chrome.\nPermite ejecutar código JavaScript directamente en el sistema operativo, sin depender de un navegador.\nDe este modo, el mismo lenguaje puede usarse tanto en el frontend como en el backend." + "objectID": "pages/Bloque2/jsI.html", + "href": "pages/Bloque2/jsI.html", + "title": "Introducción a JS", + "section": "", + "text": "Contenido" }, { - "objectID": "pages/Bloque1/entorno-reveal.html#git-y-github", - "href": "pages/Bloque1/entorno-reveal.html#git-y-github", - "title": "Preparación del entorno de trabajo", - "section": "Git y GitHub", - "text": "Git y GitHub\n¿Qué es Git?\nGit es un sistema de control de versiones distribuido. Permite registrar los cambios de un proyecto, volver a versiones anteriores y trabajar de forma colaborativa sin sobrescribir el trabajo de otros. Cada usuario dispone de una copia completa del repositorio, lo que facilita el trabajo sin conexión." + "objectID": "pages/Bloque2/jsI.html#introducción-a-js", + "href": "pages/Bloque2/jsI.html#introducción-a-js", + "title": "Introducción a JS", + "section": "Introducción a JS", + "text": "Introducción a JS\n\n¿Qué es JavaScript?\n\nEs el lenguaje de programación del navegador.\nCreado en 1995 por Brendan Eich\nPermite crear comportamientos dinámicos: responder a clics, validar formularios, mostrar u ocultar elementos, generar contenido nuevo, etc.\nSe ejecuta directamente en el navegador, sin necesidad de instalación.\nJunto con HTML y CSS forma el trinomio esencial del desarrollo web\n\nLa siguiente tabla recuerda las difrencias entre HTML, CSS y JS:\n\n\n\nCapa\nLenguaje\nFunción principal\n\n\n\n\nContenido\nHTML\nEstructura del documento\n\n\nPresentación\nCSS\nApariencia y diseño\n\n\nComportamiento\nJavaScript\nInteractividad y lógica" }, { - "objectID": "pages/Bloque1/MAhtml2.html", - "href": "pages/Bloque1/MAhtml2.html", - "title": "MA: Mas HTML", + "objectID": "pages/Bloque2/jsI.html#programación-en-js", + "href": "pages/Bloque2/jsI.html#programación-en-js", + "title": "Introducción a JS", + "section": "Programación en JS", + "text": "Programación en JS\n\nCaracterísticas generales de JS\n\nTipado dinámico\n\nTipado débil Coerción Implicita\n\nMultiparadigma\n\nÁmbito léxico (estático)\n\nModelo basado en prototipos (polimorfismo de inclusión por composición)\n\nFunciones de primera clase\n\nFunciones de orden superior\n\n\nClosures / Copia viva\nReflexión (Reflect, Proxy, descriptores)\n\nMetaprogramación\nSin Polimorfismo Ad-hoc de sobrecarga, ni Polimorfismo universal genérico\n\n\nEjecución single-threaded\n\nAsincronía no bloqueante\n\nPromises / async–await\n\nGarbage collection\nInteroperabilidad con JSON\n\n\n\nTipos\n\nPrimitivos\n\nstring — cadenas de texto\n\nnumber — números (enteros y decimales)\nboolean — verdadero o falso\n\nnull — ausencia intencional de valor\n\nundefined — valor no inicializado\n\nsymbol\nbigint\n\n\n\nTipos de referencia\n\nObject\n\nArray\n\nFunc tion\n\nMap / Set\n\nDate\n\n\n\n\nCaracterísticas del sistema de tipos\n\nTipado dinámico\n\nTipado débil\n\nLos primitivos se copian por valor\n\nLos objetos se copian por referencia\n\n\n\nVariables\n\nlet\n\nTipado: dinámico\nAlcance: estático\nMutables\nHoisting\nNo globales\nShadowing permitido\n\n\n\nconst\nNo son verdaderamente constantes\n\nTipado: dinámico\nAlcance: estático\nInmutables en la referencia (no permiten reasignación)\nHoisting\nNo globales\nShadowing permitido\n\n\n\nvar\nNo se usa\n\nTipado: dinámico\nAlcance: de función (no de bloque)\nMutables\nHoisting (inicializadas como undefined)\nGlobales si se declaran en el ámbito global (propiedad de window/globalThis)\nShadowing permitido, pero con reglas inconsistentes (puede causar illegal shadowing en combinación con let/const)" + }, + { + "objectID": "pages/Bloque2/jsI-reveal.html#introducción-a-js", + "href": "pages/Bloque2/jsI-reveal.html#introducción-a-js", + "title": "Introducción a JS", + "section": "Introducción a JS", + "text": "Introducción a JS\n¿Qué es JavaScript?\n\nEs el lenguaje de programación del navegador.\nCreado en 1995 por Brendan Eich\nPermite crear comportamientos dinámicos: responder a clics, validar formularios, mostrar u ocultar elementos, generar contenido nuevo, etc.\nSe ejecuta directamente en el navegador, sin necesidad de instalación.\nJunto con HTML y CSS forma el trinomio esencial del desarrollo web\n\nLa siguiente tabla recuerda las difrencias entre HTML, CSS y JS:" + }, + { + "objectID": "pages/Bloque2/jsI-reveal.html#programación-en-js", + "href": "pages/Bloque2/jsI-reveal.html#programación-en-js", + "title": "Introducción a JS", + "section": "Programación en JS", + "text": "Programación en JS\nCaracterísticas generales de JS\n\nTipado dinámico\n\nTipado débil Coerción Implicita\n\nMultiparadigma\n\nÁmbito léxico (estático)\n\nModelo basado en prototipos (polimorfismo de inclusión por composición)\n\nFunciones de primera clase\n\nFunciones de orden superior" + }, + { + "objectID": "pages/Bloque1/t2.html", + "href": "pages/Bloque1/t2.html", + "title": "T2: Web de HL II", "section": "", - "text": "Durante la explicación de teoría vista esta semana en clase nos hemos introducido en las etiquetas básicas de HTML.\nA continuación una selección de etiquetas que no hemos visto en clase, pero resulta interesante conocer, puesto que en determinadas ocasiones son útiles. Cada ítem de la lista es un enlace a la documentación de Mozilla donde está explicado el funcionamiento de la etiqueta de forma exhaustiva. No hay que conocer todos los aspectos de cada etiqueta, basta con tener una idea general de como funcionan.\n\ninput types. Muy importante conocer todos los tipos de inputs\ncode\niframe. Útil y ampliamente extendida\nhr. Línea horizontal\nfigure y figcaption. Permite insertar figura y pie de figura.\naudio. Insertar un audio en la página web.\nvideo. Insertar un audio en la página web.\nheader, main, footer. Son como <div> pero ya con usos por defecto preasignados.", + "text": "El objetivo de esta tarea, es poner en práctica lo aprendido en clase para ello vamos a formatear la web de nuestro equipo de Hyperloop, (tarea de la semana pasada).\nSe debe formatear para que quede como está Web, cuanto más se parezca mejor.\nNotas:\nLa hoja de estilos debe de estar incluida en el la etiqueta <style> del <head>.\nPara conseguir que los bordes de la table, td, tr… colapsen (que solo haya un borde y no dos) se debe utilizar la propiedad border-collapse.\nSi no se realizó la T1, puede utilizar este archivo html como base (click derechao guardar enlace como).", "crumbs": [ "Bloque I Introducción", - "Semana 1", - "MA: Mas HTML" + "Semana 2", + "T2: Web de HL II" ] }, { - "objectID": "pages/Bloque1/t1.html", - "href": "pages/Bloque1/t1.html", - "title": "T1: Web de HL I", + "objectID": "pages/Bloque1/css.html", + "href": "pages/Bloque1/css.html", + "title": "CSS", "section": "", - "text": "La primera tarea de esta semana consiste en diseñar una página web para el equipo de generación espontánea llamado Hyperloop UPV, la web debe de ser realizada en un archivo HTML y debe de constar por lo menos de los siguientes apartados y estructura\n\nTítulo principal de la página <h1>\nVarios secciones cada una introducida por un título <h2> (si es necesario hacer <h3>)\n\nDescripción del equipo\nLista desordenada de los subsistemas\nLista de Partners por orden de importancia (UPV, )\nUn día en Hyperloop (nótese el título del apartado en cursiva)\n\nBreve descripción de lo que hacemos en el equipo, alguna foto\n\nMiembros\n\nUna tabla de miembros por subsistema (inventarse los datos)\n\nFormulario para solicitar unirse al equipo que solicite\n\nNombre\nApellido\nCurso (radius button)\nBotón de enviar\n\nLink a la web del TC de SW y a la oficial del equipo\n\nCada sección debe de estar contenido en un div de la siguiente forma\n\n<div>\n\n <h2>Títlo de sección</h2>\n\n <Contenido de la sección />\n\n</div>\nBase: Web", +<<<<<<< HEAD + "text": "Por el momento hemos visto dos hooks useState y useEffect, pero recordemos que en React existen más tipos de hooks que por ser menos útiles y debido a la falta de tiempo no son explicados, no obstante si hay alguno digno de mención es useRef o las referencias.\nUna ref es una referencia mutable que permite acceder directamente a un elemento del DOM o almacenar un valor persistente sin provocar un re-render del componente. El siguiente video ilustra su uso. Es un poco largo pero sirve para repasar los otros hooks.\n\n\nCon las ref podemos introducir los uncontrolled fields que nos permiten trabajar de otra forma con los formularios.\n\nSe prefiere la segunda implementación (la que no utiliza referencias) sobre la primera.", +<<<<<<< HEAD +======= + "text": "Contenido", +>>>>>>> e3c3469 (feat: varios) "crumbs": [ "Bloque I Introducción", - "Semana 1", - "T1: Web de HL I" + "Semana 2", + "CSS" ] }, { - "objectID": "pages/Bloque1/html.html", - "href": "pages/Bloque1/html.html", - "title": "HTML", - "section": "", - "text": "Contenido", + "objectID": "pages/Bloque1/css.html#problemas-de-html", + "href": "pages/Bloque1/css.html#problemas-de-html", + "title": "CSS", + "section": "Problemas de HTML", + "text": "Problemas de HTML\nHasta el momento hemos trabajado con HTML, que a pesar de ser muy práctico para la creación de la estructura interna de la web, presenta ciertas limitaciones a la hora de modificar el formato de la web, para ello se introduce CSS, una herramienta que nos va a permitir modificar el formato cómodamente.", "crumbs": [ "Bloque I Introducción", - "Semana 1", - "HTML" + "Semana 2", + "CSS" ] }, { - "objectID": "pages/Bloque1/html.html#estructura-básica-de-las-páginas-web", - "href": "pages/Bloque1/html.html#estructura-básica-de-las-páginas-web", - "title": "HTML", - "section": "Estructura básica de las páginas web", - "text": "Estructura básica de las páginas web\n\n¿Qué es una página web?\nUna página web es un documento digital accesible desde un navegador, compuesto por HTML, CSS y, cuando es necesario, JavaScript. Representa la unidad básica de contenido o interacción dentro de un sitio web y puede integrar tanto información estática como elementos dinámicos.\n\n\n¿Qué partes tiene una página web? (externas)", + "objectID": "pages/Bloque1/css.html#formato-con-css", + "href": "pages/Bloque1/css.html#formato-con-css", + "title": "CSS", + "section": "Formato con CSS", + "text": "Formato con CSS\n\nAtributo style\nSupongamos que tenemos el siguiente elemento\n<p> Hola Mundo<p>. Por ahora el texto se mostrará en color negro, el color predeterminado de HTML para las etiquetas <p>\n\n\nHola mundo\n\n\nSi se desea modificar el formato intrínseco de esta etiqueta <p> debemos incluir la propiedad style que, como su nombre indica nos permitirá modificar su estilo. Dentro de este atributo se ha de insertar propiedad CSS (no confundir con los atributos html). La propiedad CSS especifica que aspecto visual del contenido de la etiqueta. Por ejemplo, si se desea modificar el color de la letra se debe de utilizar la propiedad color (nótese que no lleva u).\n<p style=\"color:red\">Hola Mundo</p>\n\n<!-- Equivalente en Hexadecimal -->\n\n<p style=\"color:#ff0000\">Hola Mundo</p>\n\n\nHola Mundo\n\n\nSí deseamos modificar más de una propiedad CSS deberemos de serparalas dentro de la etiqueta con un punto y coma\n<p style=\"color:#ff0000; font-size: 44px\">Hola Mundo</p>\n\n\nHola Mundo\n\n\n\nProblemas del atributo style\nEl atributo style resulta útil para formatear una etiqueta individualmente, pero resulta tedioso y repetitivo para más de una etiqueta. Observe el siguiente ejemplo\n<p>Autores del culteranismo marcados en rojo<p>\n\n<ul>\n <li>Francisco de Quevedo</li>\n <li style=\"color:red; text-decoration: underline; font-size:30px;\">Luis de Góngora</li>\n <li>Baltasar Gracián</li>\n <li style=\"color:red; text-decoration: underline; font-size:30px;\">Pedro Soto de Rojas</li>\n <li>Tirso de Molina</li>\n <li>Calderón de la Barca</li>\n</ul>\n\n\nAutores del culteranismo marcados en rojo\n\n\n\nFrancisco de Quevedo\n\n\nLuis de Góngora\n\n\nBaltasar Gracián\n\n\nPedro Soto de Rojas\n\n\nTirso de Molina\n\n\nCalderón de la Barca\n\n\n\nProblemas:\n\nRepetición de mucho código\nAlta posibilidad error\nPoca escalabilidad\n\nSi añadimos por ejempo a Luis Carrillo y Sotomayor (autor culteranista) hay que volver a repetir todo el atributo\nSi deseasemos cambiar el color de rojo a verde deberemos modificar cada uno de los atributos\n\n\n\n\n\nClases e ID\n\nClases\nLa solución a este problema son las clases que nos permiten identificar aquellos componentes con características de formato similares. Se agregan como atributos a cada etiqueta\n<p>Autores del culteranismo marcados en rojo<p> <!--En este caso no se marcan en rojo-->\n\n<ul>\n <li>Francisco de Quevedo</li>\n <li class=\"culteranista\">Luis de Góngora</li>\n <li>Baltasar Gracián</li>\n <li class=\"culteranista\">Pedro Soto de Rojas</li>\n <li>Tirso de Molina</li>\n <li>Calderón de la Barca</li>\n</ul>\n\nEtiqueta <style>\nAhora para marcar en rojo los culterantistas se ha de indicar el formato de todos en la class culteranista, para ello nos definiremos una hoja de estilo que será común para todo el documento. La hoja de estilos se define en el <head> de la siguiente forma:\n<head>\n<!-- Fragemento HTML -->\n<style>\n /*Fragmento CSS*/\n .culteranistas{ /*Nótese el punto*/\n color: red;\n text-size: 40px;\n background-color: blue;\n text-decoration: underline; /*Este último ';' no es obligatorio como tal, pero es recomendable, en HTML3 y CSS2 daba error si se incluía*/\n }\n</style> \n<!--Fin de la etiqueta Style, seguimos con html-->\n</head>\nAhora se visualizará correctamente, además se añadirá el fondo azul\n\n\nComposición de clases\nSuponga que tenemos dos clases, una primera clase que modifica el tipo de letra a monospace que aplicaremos a los autores culteranistas y una segunda que modifica el grosor de la letra que se aplicará sobre los autores de lírica.\n<head><style>\n .culteranista {\n font-family: monospace;\n }\n .lirica {\n font-weight: bold;\n }\n .autores {\n list-style: square;\n }\n</style></head>\n\n<body>\n <ul class=\"autores\">\n <li class=\"lirica\">Fray Luis de León</li>\n <li class=\"culteranista\">Hortensio Félix de Paravicino</li>\n <li class=\"culteranista lirica\">Lope de Vega</li>\n <li class=\"lirica\">San Juan de la Cruz</li>\n </ul>\n</body>\n\n\n\nFray Luis de León\n\n\nHortensio Félix de Paravicino\n\n\nLope de Vega\n\n\nSan Juan de la Cruz\n\n\n\n\n\n\nID\nLos ID son como las clases pero solo se pueden utlizar una vez por sitio web. Es útil para cosas que no se deben repetir más de una vez por sitio web.\n<style>\n#principal{\n text-align: center\n color:blue\n}\n</style>\n<!--[...]-->\n<div id=\"principal\">\n <h4>Teatro Romántico></h4>\n <p>El retablo romántico se caracteriza por exaltar la libertad creadora,\n la expresión intensa de los sentimientos individuales, el gusto por lo\n misterioso y lo sublime, y la reivindicación de la imaginación frente a\n las reglas clásicas.</p>\n</div>\n\n\nTeatro Romántico\n\n\nEl retablo romántico se caracteriza por exaltar la libertad creadora, la expresión intensa de los sentimientos individuales, el gusto por lo misterioso y lo sublime, y la reivindicación de la imaginación frente a las reglas clásicas.\n\n\n\n\n\nPropiedades CSS\n\nborder y border-radius\nLa propiedad border es una propiedad abreviada (shorthand) que en realidad combina tres propiedades más pequeñas:\n\nborder-width → grosor del borde\n\nborder-style → estilo del borde (solid, dashed, dotted, etc.)\n\nborder-color → color del borde\n\nPor ejemplo, estas dos definiciones son equivalentes:\n/* Forma abreviada */\n.caja {\n border: 2px solid red;\n}\n\n/* Forma “desdoblada” en 3 mini propiedades */\n.caja-desdoblada {\n border-width: 2px;\n border-style: solid;\n border-color: red;\n}\n Lope de Vega\n\n\nborder-top, border-right, border-bottom, border-left\nCSS permite aplicar bordes distintos en cada lado. Cada uno funciona igual que border pero aplicado a un solo lado:\nborder-top\nborder-right\nborder-bottom\nborder-left\n.caja-bordes {\n border-top: 3px solid red;\n border-right: 2px dashed blue;\n border-bottom: 4px dotted green;\n border-left: 5px double orange;\n}\nTambién pueden desdoblarse:\n.caja-top-desdoblado {\n border-top-width: 4px;\n border-top-style: solid;\n border-top-color: purple;\n}\n\n\nmargin y padding\nLas propiedades margin y padding controlan el espacio alrededor de los elementos, pero cada una actúa en una zona distinta:\n\nmargin → espacio externo, fuera del borde del elemento\n\npadding → espacio interno, entre el contenido y el borde\n\nVisualmente:\n\n\n \n\n\n\n CONTENT\n\n\n\n\n<div style=\"background:#f0f0f0; padding:20px;\">\n <!-- MARGIN (gris claro alrededor del borde) -->\n <!-- BORDER -->\n <div style=\"border:3px solid black\">\n <!-- PADDING (espacio interno) -->\n <div style=\"background:#d0ffd0; padding:15px;\">\n <!-- CONTENT -->\n <span style=\"background-color:white\">CONTENT</span>\n </div>\n </div>\n</div>\n\nRegla Trouble\nCuando margin o padding usan 4 valores, el orden siempre es el mismo:\ntop, right, bottom, left\nPara recordarlo fácilmente se utiliza la regla mnemotécnica Trouble:\n\nT → Top (arriba)\n\nR → Right (derecha)\n\nB → Bottom (abajo)\n\nL → Left (izquierda)\n\nEs decir:\nmargin: top right bottom left;\npadding: top right bottom left;\n\n\n\n\n\n\nTipTruco para los ingenieros: La regla de la mano derecha\n\n\n\nEl orden de los margin y de los padding siempre es en sentido horario.\nPor lo que podemos utilizar la regla de la mano derecha de la inducción electro magnética asumiendo que el vector intensidad apunta hacia la pantalla\n\n\n\n\n\n\nArchivos externos CSS\nIncluir en la cabecerá el CSS presenta ventajas como tener la página web en un único archivo. Sin embargo en la práctica normalmente trabajaremos con más de 2 archivos por lo que incluir uno más o uno menos no marca la diferencia. Por lo que podemos separar el css en un archivo externo .css. De esta forma podremos reutilizar las hojas de estilos.\n<head>\n <title>Mi Página</title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n</head>", "crumbs": [ "Bloque I Introducción", - "Semana 1", - "HTML" + "Semana 2", + "CSS" ] }, { - "objectID": "pages/Bloque1/html.html#html5", - "href": "pages/Bloque1/html.html#html5", - "title": "HTML", - "section": "HTML5", - "text": "HTML5\n\n¿Qué es HTML?\nHTML es un lenguaje de marcas que permite definir la estructura y el contenido de un documento para la web. Mediante un conjunto de etiquetas, el desarrollador describe elementos como textos, imágenes, enlaces o formularios, indicando su función dentro de la página. Es la base sobre la que posteriormente se aplican estilos (CSS) y comportamientos dinámicos (JavaScript).\n\n\nEstructura básica\n<!DOCTYPE html>\n<html>\n<head>\n\n</head>\n\n<body>\n\n <p>Clase 1 del TC</p>\n \n</body>\n</html>\nEn el código aparecen varias etiquetas HTML, y cada una tiene una etiqueta de apertura y una etiqueta de cierre (por ejemplo, <p> y </p>).\nEstas etiquetas delimitan y organizan el contenido del documento:\n- <head> agrupa la información del documento,\n- <body> contiene lo que verá el usuario,\n- <p> define un párrafo.\nLa función de las etiquetas es indicar al navegador qué es cada parte del documento y cómo debe interpretarla.\n\n\nHead\nSe corresponde con la cabecera de la pestaña, principalmente solo se modifica el logotipo y el contenido de esta.\nTambién se utiliza para almacenar los metadatos de la web, así como scripts de JavaScript y hojas de estilo de CSS.\n<!DOCTYPE html>\n<html>\n<head>\n\n <title> Web del TC </title>\n\n</head>\n\n<body>\n\n <p>Clase 1 del TC</p>\n \n</body>\n</html>\n\n\nBody\nSe corresponde con todo el contenido de la página dentro podemos utilizar multitud de etiquetas, acontinuación expondremos las más importantes.\nHasta el momento hemos trabajado únicamente con etiquietas invividuales, pero pronto veremos como podemos juntar varias etiquetas simples para obtener estructuras más complejas como tablas o formularios.\nTodo el código mostrado a partir de ahora se asume que esta correctamente ubicado dentro de una etiqueta body\n\n<p> Paragraph\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n<p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n</p>\n\n\n<br> Break Line\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\nullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n<p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n <br></br>\n ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n</p>\n\n\n<ul> Unordered list\n\nFrancisco de Quevedo\nLope de Vega\nGóngora\n\n<ul>\n <li>Francisco de Quevedo</li>\n <li>Lope de Vega</li>\n <li>Góngora</li>\n</ul>\n\n\n<ol> Ordered list\n\nRecepción\nDiscurso del Rector\nDespedida\n\n<ol>\n <li>Recepción </li>\n <li>Discruso del Rector</li>\n <li>Despedida</li>\n</ol>\n\n\n<h#> Headings\n<h1>Título 1</h1>\n<h2>Título 2</h2>\n<h3>Título 3</h3>\n<h4>Título 4</h4>\n<h5>Título 5</h5>\n<h6>Título 6</h6>\n\n\n<div> Divisor y <span> Span\nEtiquetas contenedores, utilizadas para agrupar otras etiquetas, no presentan ningún efecto visible intrínsico, salvo que tras utilizar <div> se produce un salto de línea. Por lo que utilizaremos <div> para agrupar grandes grupos de etiquetas y <span> para fragementos más pequeños\n\n<div>\n<div>\n <h2>Capítulo 2 </h2>\n <p>\n Mio Cid Ruy Díaz por Burgos entró,<br></br>\n en su conpaña sessaenta pendones.<br></br>\n Exiénlo ver mugieres e varones,<br></br>\n burgeses e burgesas por las finiestras son,<br></br>\n plorando de los ojos, tanto avién el dolor,<br></br>\n de las sus bocas todos dizían una razón:<br></br>\n — ¡Dios, qué buen vassallo, si oviesse buen señor!—\n </p>\n</div>\n\n\n\n<strong> Strong, <i> Italic\nNegrita Itálica Negrita e Itálica\n<strong>Negrita</strong>\n<i>Itálica</i>\n<strong><i> Negrita e Itálica</i></strong>\n\n\nComentario\nEtiqueta invisible\n<p>Etiqueta invisible</p>\n\n<!-- Soy un comenario -->\n\n\nTablas\n\n\n\n\nProducto\n\n\nCantidad\n\n\nPrecio (€)\n\n\n\n\n\n\nManzanas\n\n\n10\n\n\n3,50\n\n\n\n\nNaranjas\n\n\n8\n\n\n4,00\n\n\n\n\nPlátanos\n\n\n6\n\n\n2,80\n\n\n\n\n\n\nTotal\n\n\n24\n\n\n10,30\n\n\n\n\n<table>\n <thead>\n <tr>\n <th>Producto</th>\n <th>Cantidad</th>\n <th>Precio (€)</th>\n </tr>\n </thead>\n\n <tbody>\n <tr>\n <td>Manzanas</td>\n <td>10</td>\n <td>3,50</td>\n </tr>\n <tr>\n <td>Naranjas</td>\n <td>8</td>\n <td>4,00</td>\n </tr>\n <tr>\n <td>Plátanos</td>\n <td>6</td>\n <td>2,80</td>\n </tr>\n </tbody>\n\n <tfoot>\n <tr>\n <td>Total</td>\n <td>24</td>\n <td>10,30</td>\n </tr>\n </tfoot>\n</table>\n\n\n<a> Link\nHyperloopUPV\n<!-- ¿Qué pasa con la URL -->\n<a>Hyperloop UPV</a>\n\nPropiedades HTML\nLas etiquetas o elementos html disponen de atributos que nos permiten modificar su comportamiento interno.\nEn el caso de las etiquetas <a> debemos de especificar en los atributos la referncia en cuestión\n <a href=\"https://hyperloopupv.com/\"> HyperloopUPV </a>\n\n\n\n<img> Image\n\n\n\n“Plaza de la Reina”\n\n\n<img src=\"../pr.jpg\" alt=\"Plaza con una fuente en el centro alrdedor casetas y fincas\">\n\n\n<form> Forms\nAmpliamente utilizados en HTML, trabajan sobre la etiqueta <input> la cual tiene muchos tipos.\n\n<input type=\"text\">\n\nNombre: \n\n<form>\n\n <label for=\"first-name\">Nombre:</label>\n\n <input type=\"text\" name=\"first-name\"/>\n</form>\n\n\n<input type=\"number\">\n\nEdad: \n\n<form>\n\n <label for=\"age\">Edad:</label>\n\n <input type=\"number\" name=\"age\" />\n</form>\n\n\n<input type=\"radio\">\n\nSubsistema: Software Firmware \n\n<form>\n\n <label for=\"sub\">Subsistema: </label><br />\n <input type=\"radio\" name=\"sub\" value=\"software\" /> Software <br />\n <input type=\"radio\" name=\"sub\" value=\"firmware\" /> Firmware <br />\n\n</form>\n\n\n<input type=\"submit\">\n\nNombre: \n\n\n<form>\n\n <label for=\"first-name\">Nombre:</label>\n <input type=\"text\" name=\"first-name\"/>\n\n <br/>\n\n <input type=\"submit\"/>\n</form>\n\n\n\n<button> Button\nPor ahora no los utilizaremos, pero es importante saber que existen\n\nSuscribirse\n\n<button>Suscribirse</button>", + "objectID": "pages/Bloque1/css.html#etiqueta-meta", + "href": "pages/Bloque1/css.html#etiqueta-meta", + "title": "CSS", + "section": "Etiqueta ", + "text": "Etiqueta <meta>\nLas etiquetas <meta> en HTML sirven para proporcionar metadatos sobre la página web. Estos metadatos no se muestran al usuario, pero son importantes para navegadores, buscadores, redes sociales y dispositivos.\n<head>\n <meta charset=\"UTF-8\"> <!-- Selecciona el conjunto de caracteres -->\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <!-- \"Hace la web Responsive\" -->\n <title>Mi Página</title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n</head>", "crumbs": [ "Bloque I Introducción", - "Semana 1", - "HTML" + "Semana 2", + "CSS" ] }, { - "objectID": "pages/Bloque1/html.html#primer-repo-de-git", - "href": "pages/Bloque1/html.html#primer-repo-de-git", - "title": "HTML", - "section": "Primer repo de Git", - "text": "Primer repo de Git\n\nIniciar sesión en cuenta de GitHub\nBarra superior derecha, Símbolo + > New Repo\nRepository Name\nDescription of the repo\nVisibility\nAdd README\nCrear repositorio\n\n\n\nDesde la ventana del repositorio creado\nCode <> > Clone > HTTPS > Copiar URL\nDesde VScode\nClonar repositorio (si no aparece F1, paleta de comandos Clonar Repositorio)\nPegar la URL del repo\nPresionar intro (equivalente a git clone)\n\n\n\nRealizar cambios\nDesde la barra derecha seleccionar menú de Git (3 nodos interconectados por dos aristas)\nAgregar presionando el + los archivos a la staging area (equivalente a git add <file>)\nEscribir mensaje de commit y presionar botón de confirmación (equivalente a git commit)\n\n\nUna vez se hayan realizados todos los commits deseados presionar la rueda de sincronización en la barra de estado. Este último cambio es equivalente a ejecutar git pull y git push.\npush sube los cambios al repositorio remoto pull actualiza los cambios de repositorio remoto por el local", + "objectID": "pages/Bloque1/css.html#git-github", + "href": "pages/Bloque1/css.html#git-github", + "title": "CSS", + "section": "Git & GitHub:", + "text": "Git & GitHub:\nLos comandos de git nos permiten utilizar la cli para gestionar nuestro repositorio\ngit init # Incializa repositorio (= crear repo con GitHub)\ngit clone <url-repo> \n\ngit add <files> # Añade los archivos a la stagging area\ngit commit -m \"<mensaje de commit>\" # commit\n\ngit push # push\ngit pull # pull\n\ngit status # estado actual del repo\ngit log # historia reciente del log con poco detalle de profundidad\n\ngit diff <file> # muestra la diferencia entre la versión modificada ente un archivo y otro", "crumbs": [ "Bloque I Introducción", - "Semana 1", - "HTML" + "Semana 2", + "CSS" ] }, { - "objectID": "pages/Bloque1/ehtml.html#estructura-básica-de-las-páginas-web", - "href": "pages/Bloque1/ehtml.html#estructura-básica-de-las-páginas-web", - "title": "HTML", - "section": "Estructura básica de las páginas web", - "text": "Estructura básica de las páginas web\n¿Qué es una página web?\nUna página web es un documento digital accesible desde un navegador, compuesto por HTML, CSS y, cuando es necesario, JavaScript. Representa la unidad básica de contenido o interacción dentro de un sitio web y puede integrar tanto información estática como elementos dinámicos." + "objectID": "pages/Bloque1/css_p.html#problemas-de-html", + "href": "pages/Bloque1/css_p.html#problemas-de-html", + "title": "CSS", + "section": "Problemas de HTML", + "text": "Problemas de HTML\nHasta el momento hemos trabajado con HTML, que a pesar de ser muy práctico para la creación de la estructura interna de la web, presenta ciertas limitaciones a la hora de modificar el formato de la web, para ello se introduce CSS, una herramienta que nos va a permitir modificar el formato cómodamente." }, { - "objectID": "pages/Bloque1/ehtml.html#html5", - "href": "pages/Bloque1/ehtml.html#html5", - "title": "HTML", - "section": "HTML5", - "text": "HTML5\n¿Qué es HTML?\nHTML es un lenguaje de marcas que permite definir la estructura y el contenido de un documento para la web. Mediante un conjunto de etiquetas, el desarrollador describe elementos como textos, imágenes, enlaces o formularios, indicando su función dentro de la página. Es la base sobre la que posteriormente se aplican estilos (CSS) y comportamientos dinámicos (JavaScript)." + "objectID": "pages/Bloque1/css_p.html#formato-con-css", + "href": "pages/Bloque1/css_p.html#formato-con-css", + "title": "CSS", + "section": "Formato con CSS", + "text": "Formato con CSS\nAtributo style\nSupongamos que tenemos el siguiente elemento\n<p> Hola Mundo<p>. Por ahora el texto se mostrará en color negro, el color predeterminado de HTML para las etiquetas <p>\n\n\nHola mundo" }, { - "objectID": "pages/Bloque1/ehtml.html#primer-repo-de-git", - "href": "pages/Bloque1/ehtml.html#primer-repo-de-git", - "title": "HTML", - "section": "Primer repo de Git", - "text": "Primer repo de Git\n\nIniciar sesión en cuenta de GitHub\nBarra superior derecha, Símbolo + > New Repo\nRepository Name\nDescription of the repo\nVisibility\nAdd README\nCrear repositorio" + "objectID": "pages/Bloque1/css_p.html#etiqueta-meta", + "href": "pages/Bloque1/css_p.html#etiqueta-meta", + "title": "CSS", + "section": "Etiqueta ", + "text": "Etiqueta <meta>\nLas etiquetas <meta> en HTML sirven para proporcionar metadatos sobre la página web. Estos metadatos no se muestran al usuario, pero son importantes para navegadores, buscadores, redes sociales y dispositivos.\n<head>\n <meta charset=\"UTF-8\"> <!-- Selecciona el conjunto de caracteres -->\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <!-- \"Hace la web Responsive\" -->\n <title>Mi Página</title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n</head>" }, { - "objectID": "pages/Bloque1/t2a.html", - "href": "pages/Bloque1/t2a.html", - "title": "TA2: Mi CV II", + "objectID": "pages/Bloque1/css_p.html#git-github", + "href": "pages/Bloque1/css_p.html#git-github", + "title": "CSS", + "section": "Git & GitHub:", + "text": "Git & GitHub:\nLos comandos de git nos permiten utilizar la cli para gestionar nuestro repositorio\ngit init # Incializa repositorio (= crear repo con GitHub)\ngit clone <url-repo> \n\ngit add <files> # Añade los archivos a la stagging area\ngit commit -m \"<mensaje de commit>\" # commit\n\ngit push # push\ngit pull # pull\n\ngit status # estado actual del repo\ngit log # historia reciente del log con poco detalle de profundidad\n\ngit diff <file> # muestra la diferencia entre la versión modificada ente un archivo y otro" + }, + { + "objectID": "pages/Bloque1/MAcss.html", + "href": "pages/Bloque1/MAcss.html", + "title": "MA: Selectores y Pseudoselectores", "section": "", - "text": "En la tarea previa definimos nuestra identidad digital, ahora es un buen momento dándole un toque personal con ayuda de CSS.\nSi no se realizó la T1A puede utilizar el CV de Antonio Machado como base sobre la que trabajar. (Click derecho guadrar enlace como)\nImportante: la hoja de estilos debe ser definida como un archivo externo.\nEl objetivo de esta tarea es evaluar, las habilidades de diseño y de investigación, por lo que no hay ningún ejemplo al que imitar. Siguiendo ese objetivo se le recomienda al alumno que investigue y descubrá el máximo número de propiedades CSS.", + "text": "Además del id y las class, existen más selectores que son ampliamente utilizados en la programación web. El siguiente video los explica muy detallados y sirve como repaso para lo que se ha visto esta semana de CSS. El vídeo está en Inglés y dura 20 minutos.", "crumbs": [ "Bloque I Introducción", "Semana 2", - "TA2: Mi CV II" + "MA: Selectores y Pseudoselectores" + ] + }, + { + "objectID": "pages/Bloque1/t1a.html", + "href": "pages/Bloque1/t1a.html", + "title": "TA1: Mi CV I", + "section": "", + "text": "A día de hoy es muy importante tener una imagen digital, por ello la tarea extra consite en crearte tu propia página web básica usando html.\nPuedes usar el CV de Antonio Machado como referencia.\nBase: Ejemplo", + "crumbs": [ + "Bloque I Introducción", + "Semana 1", + "TA1: Mi CV I" ] }, { @@ -997,890 +1195,1008 @@ ] }, { - "objectID": "pages/Bloque1/t1a.html", - "href": "pages/Bloque1/t1a.html", - "title": "TA1: Mi CV I", + "objectID": "pages/Bloque1/t2a.html", + "href": "pages/Bloque1/t2a.html", + "title": "TA2: Mi CV II", "section": "", - "text": "A día de hoy es muy importante tener una imagen digital, por ello la tarea extra consite en crearte tu propia página web básica usando html.\nPuedes usar el CV de Antonio Machado como referencia.\nBase: Ejemplo", + "text": "En la tarea previa definimos nuestra identidad digital, ahora es un buen momento dándole un toque personal con ayuda de CSS.\nSi no se realizó la T1A puede utilizar el CV de Antonio Machado como base sobre la que trabajar. (Click derecho guadrar enlace como)\nImportante: la hoja de estilos debe ser definida como un archivo externo.\nEl objetivo de esta tarea es evaluar, las habilidades de diseño y de investigación, por lo que no hay ningún ejemplo al que imitar. Siguiendo ese objetivo se le recomienda al alumno que investigue y descubrá el máximo número de propiedades CSS.", "crumbs": [ "Bloque I Introducción", - "Semana 1", - "TA1: Mi CV I" + "Semana 2", + "TA2: Mi CV II" ] }, { - "objectID": "pages/Bloque1/MAcss.html", - "href": "pages/Bloque1/MAcss.html", - "title": "MA: Selectores y Pseudoselectores", + "objectID": "pages/Bloque1/ehtml.html#estructura-básica-de-las-páginas-web", + "href": "pages/Bloque1/ehtml.html#estructura-básica-de-las-páginas-web", + "title": "HTML", + "section": "Estructura básica de las páginas web", + "text": "Estructura básica de las páginas web\n¿Qué es una página web?\nUna página web es un documento digital accesible desde un navegador, compuesto por HTML, CSS y, cuando es necesario, JavaScript. Representa la unidad básica de contenido o interacción dentro de un sitio web y puede integrar tanto información estática como elementos dinámicos." + }, + { + "objectID": "pages/Bloque1/ehtml.html#html5", + "href": "pages/Bloque1/ehtml.html#html5", + "title": "HTML", + "section": "HTML5", + "text": "HTML5\n¿Qué es HTML?\nHTML es un lenguaje de marcas que permite definir la estructura y el contenido de un documento para la web. Mediante un conjunto de etiquetas, el desarrollador describe elementos como textos, imágenes, enlaces o formularios, indicando su función dentro de la página. Es la base sobre la que posteriormente se aplican estilos (CSS) y comportamientos dinámicos (JavaScript)." + }, + { + "objectID": "pages/Bloque1/ehtml.html#primer-repo-de-git", + "href": "pages/Bloque1/ehtml.html#primer-repo-de-git", + "title": "HTML", + "section": "Primer repo de Git", + "text": "Primer repo de Git\n\nIniciar sesión en cuenta de GitHub\nBarra superior derecha, Símbolo + > New Repo\nRepository Name\nDescription of the repo\nVisibility\nAdd README\nCrear repositorio" + }, + { + "objectID": "pages/Bloque1/html.html", + "href": "pages/Bloque1/html.html", + "title": "HTML", "section": "", - "text": "Además del id y las class, existen más selectores que son ampliamente utilizados en la programación web. El siguiente video los explica muy detallados y sirve como repaso para lo que se ha visto esta semana de CSS. El vídeo está en Inglés y dura 20 minutos.", + "text": "Contenido", "crumbs": [ "Bloque I Introducción", - "Semana 2", - "MA: Selectores y Pseudoselectores" + "Semana 1", + "HTML" ] }, { - "objectID": "pages/Bloque1/css_p.html#problemas-de-html", - "href": "pages/Bloque1/css_p.html#problemas-de-html", - "title": "CSS", - "section": "Problemas de HTML", - "text": "Problemas de HTML\nHasta el momento hemos trabajado con HTML, que a pesar de ser muy práctico para la creación de la estructura interna de la web, presenta ciertas limitaciones a la hora de modificar el formato de la web, para ello se introduce CSS, una herramienta que nos va a permitir modificar el formato cómodamente." + "objectID": "pages/Bloque1/html.html#estructura-básica-de-las-páginas-web", + "href": "pages/Bloque1/html.html#estructura-básica-de-las-páginas-web", + "title": "HTML", + "section": "Estructura básica de las páginas web", + "text": "Estructura básica de las páginas web\n\n¿Qué es una página web?\nUna página web es un documento digital accesible desde un navegador, compuesto por HTML, CSS y, cuando es necesario, JavaScript. Representa la unidad básica de contenido o interacción dentro de un sitio web y puede integrar tanto información estática como elementos dinámicos.\n\n\n¿Qué partes tiene una página web? (externas)", + "crumbs": [ + "Bloque I Introducción", + "Semana 1", + "HTML" + ] }, { - "objectID": "pages/Bloque1/css_p.html#formato-con-css", - "href": "pages/Bloque1/css_p.html#formato-con-css", - "title": "CSS", - "section": "Formato con CSS", - "text": "Formato con CSS\nAtributo style\nSupongamos que tenemos el siguiente elemento\n<p> Hola Mundo<p>. Por ahora el texto se mostrará en color negro, el color predeterminado de HTML para las etiquetas <p>\n\n\nHola mundo" + "objectID": "pages/Bloque1/html.html#html5", + "href": "pages/Bloque1/html.html#html5", + "title": "HTML", + "section": "HTML5", + "text": "HTML5\n\n¿Qué es HTML?\nHTML es un lenguaje de marcas que permite definir la estructura y el contenido de un documento para la web. Mediante un conjunto de etiquetas, el desarrollador describe elementos como textos, imágenes, enlaces o formularios, indicando su función dentro de la página. Es la base sobre la que posteriormente se aplican estilos (CSS) y comportamientos dinámicos (JavaScript).\n\n\nEstructura básica\n<!DOCTYPE html>\n<html>\n<head>\n\n</head>\n\n<body>\n\n <p>Clase 1 del TC</p>\n \n</body>\n</html>\nEn el código aparecen varias etiquetas HTML, y cada una tiene una etiqueta de apertura y una etiqueta de cierre (por ejemplo, <p> y </p>).\nEstas etiquetas delimitan y organizan el contenido del documento:\n- <head> agrupa la información del documento,\n- <body> contiene lo que verá el usuario,\n- <p> define un párrafo.\nLa función de las etiquetas es indicar al navegador qué es cada parte del documento y cómo debe interpretarla.\n\n\nHead\nSe corresponde con la cabecera de la pestaña, principalmente solo se modifica el logotipo y el contenido de esta.\nTambién se utiliza para almacenar los metadatos de la web, así como scripts de JavaScript y hojas de estilo de CSS.\n<!DOCTYPE html>\n<html>\n<head>\n\n <title> Web del TC </title>\n\n</head>\n\n<body>\n\n <p>Clase 1 del TC</p>\n \n</body>\n</html>\n\n\nBody\nSe corresponde con todo el contenido de la página dentro podemos utilizar multitud de etiquetas, acontinuación expondremos las más importantes.\nHasta el momento hemos trabajado únicamente con etiquietas invividuales, pero pronto veremos como podemos juntar varias etiquetas simples para obtener estructuras más complejas como tablas o formularios.\nTodo el código mostrado a partir de ahora se asume que esta correctamente ubicado dentro de una etiqueta body\n\n<p> Paragraph\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n<p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n</p>\n\n\n<br> Break Line\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\nullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n<p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n <br></br>\n ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n</p>\n\n\n<ul> Unordered list\n\nFrancisco de Quevedo\nLope de Vega\nGóngora\n\n<ul>\n <li>Francisco de Quevedo</li>\n <li>Lope de Vega</li>\n <li>Góngora</li>\n</ul>\n\n\n<ol> Ordered list\n\nRecepción\nDiscurso del Rector\nDespedida\n\n<ol>\n <li>Recepción </li>\n <li>Discruso del Rector</li>\n <li>Despedida</li>\n</ol>\n\n\n<h#> Headings\n<h1>Título 1</h1>\n<h2>Título 2</h2>\n<h3>Título 3</h3>\n<h4>Título 4</h4>\n<h5>Título 5</h5>\n<h6>Título 6</h6>\n\n\n<div> Divisor y <span> Span\nEtiquetas contenedores, utilizadas para agrupar otras etiquetas, no presentan ningún efecto visible intrínsico, salvo que tras utilizar <div> se produce un salto de línea. Por lo que utilizaremos <div> para agrupar grandes grupos de etiquetas y <span> para fragementos más pequeños\n\n<div>\n<div>\n <h2>Capítulo 2 </h2>\n <p>\n Mio Cid Ruy Díaz por Burgos entró,<br></br>\n en su conpaña sessaenta pendones.<br></br>\n Exiénlo ver mugieres e varones,<br></br>\n burgeses e burgesas por las finiestras son,<br></br>\n plorando de los ojos, tanto avién el dolor,<br></br>\n de las sus bocas todos dizían una razón:<br></br>\n — ¡Dios, qué buen vassallo, si oviesse buen señor!—\n </p>\n</div>\n\n\n\n<strong> Strong, <i> Italic\nNegrita Itálica Negrita e Itálica\n<strong>Negrita</strong>\n<i>Itálica</i>\n<strong><i> Negrita e Itálica</i></strong>\n\n\nComentario\nEtiqueta invisible\n<p>Etiqueta invisible</p>\n\n<!-- Soy un comenario -->\n\n\nTablas\n\n\n\n\nProducto\n\n\nCantidad\n\n\nPrecio (€)\n\n\n\n\n\n\nManzanas\n\n\n10\n\n\n3,50\n\n\n\n\nNaranjas\n\n\n8\n\n\n4,00\n\n\n\n\nPlátanos\n\n\n6\n\n\n2,80\n\n\n\n\n\n\nTotal\n\n\n24\n\n\n10,30\n\n\n\n\n<table>\n <thead>\n <tr>\n <th>Producto</th>\n <th>Cantidad</th>\n <th>Precio (€)</th>\n </tr>\n </thead>\n\n <tbody>\n <tr>\n <td>Manzanas</td>\n <td>10</td>\n <td>3,50</td>\n </tr>\n <tr>\n <td>Naranjas</td>\n <td>8</td>\n <td>4,00</td>\n </tr>\n <tr>\n <td>Plátanos</td>\n <td>6</td>\n <td>2,80</td>\n </tr>\n </tbody>\n\n <tfoot>\n <tr>\n <td>Total</td>\n <td>24</td>\n <td>10,30</td>\n </tr>\n </tfoot>\n</table>\n\n\n<a> Link\nHyperloopUPV\n<!-- ¿Qué pasa con la URL -->\n<a>Hyperloop UPV</a>\n\nPropiedades HTML\nLas etiquetas o elementos html disponen de atributos que nos permiten modificar su comportamiento interno.\nEn el caso de las etiquetas <a> debemos de especificar en los atributos la referncia en cuestión\n <a href=\"https://hyperloopupv.com/\"> HyperloopUPV </a>\n\n\n\n<img> Image\n\n\n\n“Plaza de la Reina”\n\n\n<img src=\"../pr.jpg\" alt=\"Plaza con una fuente en el centro alrdedor casetas y fincas\">\n\n\n<form> Forms\nAmpliamente utilizados en HTML, trabajan sobre la etiqueta <input> la cual tiene muchos tipos.\n\n<input type=\"text\">\n\nNombre: \n\n<form>\n\n <label for=\"first-name\">Nombre:</label>\n\n <input type=\"text\" name=\"first-name\"/>\n</form>\n\n\n<input type=\"number\">\n\nEdad: \n\n<form>\n\n <label for=\"age\">Edad:</label>\n\n <input type=\"number\" name=\"age\" />\n</form>\n\n\n<input type=\"radio\">\n\nSubsistema: Software Firmware \n\n<form>\n\n <label for=\"sub\">Subsistema: </label><br />\n <input type=\"radio\" name=\"sub\" value=\"software\" /> Software <br />\n <input type=\"radio\" name=\"sub\" value=\"firmware\" /> Firmware <br />\n\n</form>\n\n\n<input type=\"submit\">\n\nNombre: \n\n\n<form>\n\n <label for=\"first-name\">Nombre:</label>\n <input type=\"text\" name=\"first-name\"/>\n\n <br/>\n\n <input type=\"submit\"/>\n</form>\n\n\n\n<button> Button\nPor ahora no los utilizaremos, pero es importante saber que existen\n\nSuscribirse\n\n<button>Suscribirse</button>", + "crumbs": [ +<<<<<<< HEAD + "Bloque III Interacción", + "Semana 6", + "DOM" +======= + "crumbs": [ + "Bloque III Interacción", + "Semana 9", + "MA: *Uncontrolled fields* y `useRef`" +>>>>>>> 8e10774 (feat: explicacion semana 10 (#4)) + ] }, { - "objectID": "pages/Bloque1/css_p.html#etiqueta-meta", - "href": "pages/Bloque1/css_p.html#etiqueta-meta", - "title": "CSS", - "section": "Etiqueta ", - "text": "Etiqueta <meta>\nLas etiquetas <meta> en HTML sirven para proporcionar metadatos sobre la página web. Estos metadatos no se muestran al usuario, pero son importantes para navegadores, buscadores, redes sociales y dispositivos.\n<head>\n <meta charset=\"UTF-8\"> <!-- Selecciona el conjunto de caracteres -->\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <!-- \"Hace la web Responsive\" -->\n <title>Mi Página</title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n</head>" + "objectID": "pages/Bloque3/t9.html", + "href": "pages/Bloque3/t9.html", + "title": "T6: Romancero Gitano I", + "section": "", + "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado" }, { - "objectID": "pages/Bloque1/css_p.html#git-github", - "href": "pages/Bloque1/css_p.html#git-github", - "title": "CSS", - "section": "Git & GitHub:", - "text": "Git & GitHub:\nLos comandos de git nos permiten utilizar la cli para gestionar nuestro repositorio\ngit init # Incializa repositorio (= crear repo con GitHub)\ngit clone <url-repo> \n\ngit add <files> # Añade los archivos a la stagging area\ngit commit -m \"<mensaje de commit>\" # commit\n\ngit push # push\ngit pull # pull\n\ngit status # estado actual del repo\ngit log # historia reciente del log con poco detalle de profundidad\n\ngit diff <file> # muestra la diferencia entre la versión modificada ente un archivo y otro" + "objectID": "pages/Bloque3/t9.html#objetivo-de-la-tarea", + "href": "pages/Bloque3/t9.html#objetivo-de-la-tarea", + "title": "T6: Romancero Gitano I", + "section": "", + "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado" }, { - "objectID": "pages/Bloque1/css.html", - "href": "pages/Bloque1/css.html", - "title": "CSS", - "section": "", - "text": "Contenido", - "crumbs": [ - "Bloque I Introducción", - "Semana 2", - "CSS" - ] + "objectID": "pages/Bloque3/t9.html#estructura-html", + "href": "pages/Bloque3/t9.html#estructura-html", + "title": "T6: Romancero Gitano I", + "section": "Estructura HTML", + "text": "Estructura HTML\nEl documento HTML debe:\n\nEstar correctamente estructurado (<!DOCTYPE>, <html>, <head>, <body>).\nContener un contenedor principal centrado horizontalmente.\nIncluir, en este orden:\n\nUn elemento para mostrar información métrica del poema (número de estrofas y versos).\nUn elemento para el título del poema.\nUn elemento para el texto del poema, respetando los saltos de verso utilizando la etiqueta <pre>.\nUn botón que permita cambiar de poema.\n\n\nNo debe utilizarse ningún framework ni librería externa." }, { - "objectID": "pages/Bloque1/css.html#problemas-de-html", - "href": "pages/Bloque1/css.html#problemas-de-html", - "title": "CSS", - "section": "Problemas de HTML", - "text": "Problemas de HTML\nHasta el momento hemos trabajado con HTML, que a pesar de ser muy práctico para la creación de la estructura interna de la web, presenta ciertas limitaciones a la hora de modificar el formato de la web, para ello se introduce CSS, una herramienta que nos va a permitir modificar el formato cómodamente.", - "crumbs": [ - "Bloque I Introducción", - "Semana 2", - "CSS" - ] + "objectID": "pages/Bloque3/t9.html#javascript", + "href": "pages/Bloque3/t9.html#javascript", + "title": "T6: Romancero Gitano I", + "section": "JavaScript", + "text": "JavaScript\n\nDatos\nEn JavaScript se debe definir un array de objetos, donde cada objeto represente un poema y tenga al menos:\n\nUn título.\nEl texto del poema como una cadena de texto, usando saltos de línea para los versos.\n\nEl cambio de poema debe hacerse recorriendo este array de forma cíclica (cola circular) mediante el botón.\nDescargar poemas (click derecho guardar enlace como)\n\n\nManipulación del DOM\nEl comportamiento de la página debe implementarse exclusivamente con DOM nativo, cumpliendo lo siguiente:\n\nTodas las funciones deben declararse como arrow functions.\nAl pulsar el botón:\n\nSe actualiza el título.\nSe actualiza el texto del poema.\nSe modifica el formato del fondo.\nSe recalculan y muestran:\n\nNúmero de versos.\nNúmero de estrofas (bloques separados por líneas en blanco).\n\n\n\nEl cálculo debe realizarse a partir del texto del poema, no con valores predefinidos." }, { - "objectID": "pages/Bloque1/css.html#formato-con-css", - "href": "pages/Bloque1/css.html#formato-con-css", - "title": "CSS", - "section": "Formato con CSS", - "text": "Formato con CSS\n\nAtributo style\nSupongamos que tenemos el siguiente elemento\n<p> Hola Mundo<p>. Por ahora el texto se mostrará en color negro, el color predeterminado de HTML para las etiquetas <p>\n\n\nHola mundo\n\n\nSi se desea modificar el formato intrínseco de esta etiqueta <p> debemos incluir la propiedad style que, como su nombre indica nos permitirá modificar su estilo. Dentro de este atributo se ha de insertar propiedad CSS (no confundir con los atributos html). La propiedad CSS especifica que aspecto visual del contenido de la etiqueta. Por ejemplo, si se desea modificar el color de la letra se debe de utilizar la propiedad color (nótese que no lleva u).\n<p style=\"color:red\">Hola Mundo</p>\n\n<!-- Equivalente en Hexadecimal -->\n\n<p style=\"color:#ff0000\">Hola Mundo</p>\n\n\nHola Mundo\n\n\nSí deseamos modificar más de una propiedad CSS deberemos de serparalas dentro de la etiqueta con un punto y coma\n<p style=\"color:#ff0000; font-size: 44px\">Hola Mundo</p>\n\n\nHola Mundo\n\n\n\nProblemas del atributo style\nEl atributo style resulta útil para formatear una etiqueta individualmente, pero resulta tedioso y repetitivo para más de una etiqueta. Observe el siguiente ejemplo\n<p>Autores del culteranismo marcados en rojo<p>\n\n<ul>\n <li>Francisco de Quevedo</li>\n <li style=\"color:red; text-decoration: underline; font-size:30px;\">Luis de Góngora</li>\n <li>Baltasar Gracián</li>\n <li style=\"color:red; text-decoration: underline; font-size:30px;\">Pedro Soto de Rojas</li>\n <li>Tirso de Molina</li>\n <li>Calderón de la Barca</li>\n</ul>\n\n\nAutores del culteranismo marcados en rojo\n\n\n\nFrancisco de Quevedo\n\n\nLuis de Góngora\n\n\nBaltasar Gracián\n\n\nPedro Soto de Rojas\n\n\nTirso de Molina\n\n\nCalderón de la Barca\n\n\n\nProblemas:\n\nRepetición de mucho código\nAlta posibilidad error\nPoca escalabilidad\n\nSi añadimos por ejempo a Luis Carrillo y Sotomayor (autor culteranista) hay que volver a repetir todo el atributo\nSi deseasemos cambiar el color de rojo a verde deberemos modificar cada uno de los atributos\n\n\n\n\n\nClases e ID\n\nClases\nLa solución a este problema son las clases que nos permiten identificar aquellos componentes con características de formato similares. Se agregan como atributos a cada etiqueta\n<p>Autores del culteranismo marcados en rojo<p> <!--En este caso no se marcan en rojo-->\n\n<ul>\n <li>Francisco de Quevedo</li>\n <li class=\"culteranista\">Luis de Góngora</li>\n <li>Baltasar Gracián</li>\n <li class=\"culteranista\">Pedro Soto de Rojas</li>\n <li>Tirso de Molina</li>\n <li>Calderón de la Barca</li>\n</ul>\n\nEtiqueta <style>\nAhora para marcar en rojo los culterantistas se ha de indicar el formato de todos en la class culteranista, para ello nos definiremos una hoja de estilo que será común para todo el documento. La hoja de estilos se define en el <head> de la siguiente forma:\n<head>\n<!-- Fragemento HTML -->\n<style>\n /*Fragmento CSS*/\n .culteranistas{ /*Nótese el punto*/\n color: red;\n text-size: 40px;\n background-color: blue;\n text-decoration: underline; /*Este último ';' no es obligatorio como tal, pero es recomendable, en HTML3 y CSS2 daba error si se incluía*/\n }\n</style> \n<!--Fin de la etiqueta Style, seguimos con html-->\n</head>\nAhora se visualizará correctamente, además se añadirá el fondo azul\n\n\nComposición de clases\nSuponga que tenemos dos clases, una primera clase que modifica el tipo de letra a monospace que aplicaremos a los autores culteranistas y una segunda que modifica el grosor de la letra que se aplicará sobre los autores de lírica.\n<head><style>\n .culteranista {\n font-family: monospace;\n }\n .lirica {\n font-weight: bold;\n }\n .autores {\n list-style: square;\n }\n</style></head>\n\n<body>\n <ul class=\"autores\">\n <li class=\"lirica\">Fray Luis de León</li>\n <li class=\"culteranista\">Hortensio Félix de Paravicino</li>\n <li class=\"culteranista lirica\">Lope de Vega</li>\n <li class=\"lirica\">San Juan de la Cruz</li>\n </ul>\n</body>\n\n\n\nFray Luis de León\n\n\nHortensio Félix de Paravicino\n\n\nLope de Vega\n\n\nSan Juan de la Cruz\n\n\n\n\n\n\nID\nLos ID son como las clases pero solo se pueden utlizar una vez por sitio web. Es útil para cosas que no se deben repetir más de una vez por sitio web.\n<style>\n#principal{\n text-align: center\n color:blue\n}\n</style>\n<!--[...]-->\n<div id=\"principal\">\n <h4>Teatro Romántico></h4>\n <p>El retablo romántico se caracteriza por exaltar la libertad creadora,\n la expresión intensa de los sentimientos individuales, el gusto por lo\n misterioso y lo sublime, y la reivindicación de la imaginación frente a\n las reglas clásicas.</p>\n</div>\n\n\nTeatro Romántico\n\n\nEl retablo romántico se caracteriza por exaltar la libertad creadora, la expresión intensa de los sentimientos individuales, el gusto por lo misterioso y lo sublime, y la reivindicación de la imaginación frente a las reglas clásicas.\n\n\n\n\n\nPropiedades CSS\n\nborder y border-radius\nLa propiedad border es una propiedad abreviada (shorthand) que en realidad combina tres propiedades más pequeñas:\n\nborder-width → grosor del borde\n\nborder-style → estilo del borde (solid, dashed, dotted, etc.)\n\nborder-color → color del borde\n\nPor ejemplo, estas dos definiciones son equivalentes:\n/* Forma abreviada */\n.caja {\n border: 2px solid red;\n}\n\n/* Forma “desdoblada” en 3 mini propiedades */\n.caja-desdoblada {\n border-width: 2px;\n border-style: solid;\n border-color: red;\n}\n Lope de Vega\n\n\nborder-top, border-right, border-bottom, border-left\nCSS permite aplicar bordes distintos en cada lado. Cada uno funciona igual que border pero aplicado a un solo lado:\nborder-top\nborder-right\nborder-bottom\nborder-left\n.caja-bordes {\n border-top: 3px solid red;\n border-right: 2px dashed blue;\n border-bottom: 4px dotted green;\n border-left: 5px double orange;\n}\nTambién pueden desdoblarse:\n.caja-top-desdoblado {\n border-top-width: 4px;\n border-top-style: solid;\n border-top-color: purple;\n}\n\n\nmargin y padding\nLas propiedades margin y padding controlan el espacio alrededor de los elementos, pero cada una actúa en una zona distinta:\n\nmargin → espacio externo, fuera del borde del elemento\n\npadding → espacio interno, entre el contenido y el borde\n\nVisualmente:\n\n\n \n\n\n\n CONTENT\n\n\n\n\n<div style=\"background:#f0f0f0; padding:20px;\">\n <!-- MARGIN (gris claro alrededor del borde) -->\n <!-- BORDER -->\n <div style=\"border:3px solid black\">\n <!-- PADDING (espacio interno) -->\n <div style=\"background:#d0ffd0; padding:15px;\">\n <!-- CONTENT -->\n <span style=\"background-color:white\">CONTENT</span>\n </div>\n </div>\n</div>\n\nRegla Trouble\nCuando margin o padding usan 4 valores, el orden siempre es el mismo:\ntop, right, bottom, left\nPara recordarlo fácilmente se utiliza la regla mnemotécnica Trouble:\n\nT → Top (arriba)\n\nR → Right (derecha)\n\nB → Bottom (abajo)\n\nL → Left (izquierda)\n\nEs decir:\nmargin: top right bottom left;\npadding: top right bottom left;\n\n\n\n\n\n\nTipTruco para los ingenieros: La regla de la mano derecha\n\n\n\nEl orden de los margin y de los padding siempre es en sentido horario.\nPor lo que podemos utilizar la regla de la mano derecha de la inducción electro magnética asumiendo que el vector intensidad apunta hacia la pantalla\n\n\n\n\n\n\nArchivos externos CSS\nIncluir en la cabecerá el CSS presenta ventajas como tener la página web en un único archivo. Sin embargo en la práctica normalmente trabajaremos con más de 2 archivos por lo que incluir uno más o uno menos no marca la diferencia. Por lo que podemos separar el css en un archivo externo .css. De esta forma podremos reutilizar las hojas de estilos.\n<head>\n <title>Mi Página</title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n</head>", - "crumbs": [ + "objectID": "pages/Bloque3/t9.html#css", + "href": "pages/Bloque3/t9.html#css", + "title": "T6: Romancero Gitano I", + "section": "CSS", + "text": "CSS\nLorca utiliza las metáforas y la alegoría como elemento principal sobre el que construye sus poemas, al analizar profundamente descubrimos que siempre recurre a las mismas metáforas.\nEl color no se utiliza aquí solo como elemento decorativo, sino como un recurso semántico: cada color representa un símbolo literario presente en el poema.\nDesde el punto de vista técnico: - Los colores de fondo y de texto deben definirse en clases CSS. - JavaScript no decide colores, únicamente decide qué clase aplicar según el contenido del poema.\n\nPalabras clave y colores asociados\nSe debe detectar el texto del poema las siguientes palabras clave y aplicar el color de fondo correspondiente:\n\nguardia civil → fondo verde militar\nsangre → fondo granate oscuro\ncaballo → fondo color tierra\ncuchillo / navaja → fondo plateado\n\nEl color del texto debe elegirse siempre de forma que exista contraste suficiente con el fondo y se garantice la legibilidad.\nSi el poema contiene varias palabras clave, solo debe aplicarse un único estilo, siguiendo un orden de prioridad definido previamente.\nSi el poema no contiene ninguna de estas palabras, se aplicará un estilo por defecto con colores aleatorios." + }, + { + "objectID": "pages/Bloque3/t9.html#extra-opcional-símbolo-aurora", + "href": "pages/Bloque3/t9.html#extra-opcional-símbolo-aurora", + "title": "T6: Romancero Gitano I", + "section": "Extra opcional: símbolo aurora 🌈", + "text": "Extra opcional: símbolo aurora 🌈\nDe forma voluntaria, se puede añadir el símbolo aurora, que tendrá prioridad absoluta sobre todos los demás.\nCuando el poema contenga la palabra aurora, el fondo debe mostrar un degradado animado.\n\nCSS necesario para el extra\n.aurora {\n background: linear-gradient(120deg,\n #ff005d,\n #ff9f1c,\n #ffee32,\n #3cff00,\n #00e5ff,\n #7a00ff,\n #ff00c8\n );\n background-size: 600% 600%;\n animation: aurora 10s linear infinite;\n color: black;\n}\n\n@keyframes aurora {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}" + }, + { + "objectID": "pages/Bloque3/t9.html#consejos", + "href": "pages/Bloque3/t9.html#consejos", + "title": "T6: Romancero Gitano I", + "section": "Consejos", + "text": "Consejos\n\nCentrado de la página (layout clásico)\nToda la página debe estar centrada horizontalmente.\nEl centrado se consigue mediante:\n\nUn contenedor con un ancho máximo definido.\nMárgenes automáticos a izquierda y derecha.\n\nDesde el punto de vista conceptual:\n\nmargin: 0 auto no centra texto, centra bloques.\nEl navegador reparte automáticamente el espacio sobrante a ambos lados del contenedor.\n\n\n\nAnimación del cambio de color\nPara evitar que los cambios de color sean bruscos, se utiliza la propiedad transition en CSS.\nEsta propiedad indica al navegador que los cambios en determinadas propiedades visuales deben hacerse de forma progresiva.\nEjemplo conceptual:\nbody {\n transition: background-color 0.6s, color 0.6s;\n}\nGracias a esta transición: - Cuando JavaScript cambia una clase o un color, - el navegador interpola automáticamente entre el color anterior y el nuevo.\nNo es necesario programar animaciones en JavaScript: CSS se encarga de todo el efecto visual.\n\n\nBúsqueda de una palabra\nPara buscar si determinada palabra determinada se debe utilizar la función includes de la clase string\n\ntexto = \"hoy nieva\";\n\ntexto.includes(\"nieva\"); //TRUE\ntexto.includes(\"llueve\"); //FALSE\n\n\nGeneración del color aleatorio\nPara la generacióndel color aleatorio de puede utilizar la siguiente función\nconst randomColor = () => '#' + Math.floor(Math.random() * 16777215).toString(16);\n\n\nConteo versos y estrofas\nEl recuento de versos y estrofas debe hacerse a partir del texto del poema, no con valores escritos a mano. A continuación se dan algunas pistas técnicas para abordar este problema.\n\nConteo de versos\nUn verso puede considerarse, a efectos prácticos en esta tarea, como una línea de texto no vacía.\nUna estrategia habitual consiste en: - Separar el texto por saltos de línea. - Eliminar las líneas vacías o formadas solo por espacios. - Contar cuántas líneas válidas quedan.\nEjemplo orientativo:\nconst versos = texto\n .split('\\n')\n .filter(linea => linea.trim() !== '')\n .length;\nEste enfoque es suficiente para la mayoría de los poemas del Romancero gitano y evita errores frecuentes.\n\n\nConteo de estrofas\nUna estrofa puede entenderse como un bloque de versos separado de otros bloques por una línea en blanco.\nUna posible estrategia es: - Separar el texto usando dos (o más) saltos de línea consecutivos. - Eliminar bloques vacíos. - Contar los bloques resultantes.\nEjemplo orientativo:\nconst estrofas = texto\n .split(/\\n\\s*\\n/)\n .filter(bloque => bloque.trim() !== '')\n .length;\nEntrega: un único archivo HTML funcional." + }, + { + "objectID": "pages/Bloque3/t9.html#recomendaciones-para-afrontar-la-tarea", + "href": "pages/Bloque3/t9.html#recomendaciones-para-afrontar-la-tarea", + "title": "T6: Romancero Gitano I", + "section": "Recomendaciones para afrontar la tarea", + "text": "Recomendaciones para afrontar la tarea\nAl enfrentarnos a un proyecto de cierta complejitud, el como afrontarlo resulta de cricial para el desarollo del mismo por ello a a continuación dejo un esquema de implementación modular. Sería mejor no utilizarlo, pero puede ser un buen punto de partida si no se sabe como empezar la app, no es el único proceso de implementación válido ni es más correcto que cualquier otro\n\nEstructura de HTML básica contadores de versos y estrofas placeholders de poema y título y botón\nFormateo CSS parte estática: centrado, tamaño (todo lo que no sea color)\nDefinir clases con colores predeterminados\nLógica interna con JS\n\n\nBuscar palabra\nContar estrofas\nConteo versos\nSelección de clase\nGenerar color aleatorio si procede\n\n\nIntegración con DOM" + }, + { + "objectID": "pages/Bloque3/reactI.html#sintaxis-jsx", + "href": "pages/Bloque3/reactI.html#sintaxis-jsx", + "title": "React I", + "section": "Sintaxis JSX", + "text": "Sintaxis JSX\n¿Qué es la sintaxis JSX?\n\nJSX (JavaScript XML) es una extensión de JavaScript utilizada en React.\n\nPermite escribir estructuras similares a HTML directamente dentro del código JavaScript.\n\nFacilita la creación y lectura de interfaces de usuario, integrando lógica y presentación.\n\nAunque su apariencia es HTML, JSX se transpila a JavaScript puro antes de ejecutarse en el navegador.\nForma cómoda de almacenar etiquetas html como variables de JS" +======= "Bloque I Introducción", - "Semana 2", - "CSS" + "Semana 1", + "HTML" ] }, { - "objectID": "pages/Bloque1/css.html#etiqueta-meta", - "href": "pages/Bloque1/css.html#etiqueta-meta", - "title": "CSS", - "section": "Etiqueta ", - "text": "Etiqueta <meta>\nLas etiquetas <meta> en HTML sirven para proporcionar metadatos sobre la página web. Estos metadatos no se muestran al usuario, pero son importantes para navegadores, buscadores, redes sociales y dispositivos.\n<head>\n <meta charset=\"UTF-8\"> <!-- Selecciona el conjunto de caracteres -->\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <!-- \"Hace la web Responsive\" -->\n <title>Mi Página</title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n</head>", + "objectID": "pages/Bloque1/html.html#primer-repo-de-git", + "href": "pages/Bloque1/html.html#primer-repo-de-git", + "title": "HTML", + "section": "Primer repo de Git", + "text": "Primer repo de Git\n\nIniciar sesión en cuenta de GitHub\nBarra superior derecha, Símbolo + > New Repo\nRepository Name\nDescription of the repo\nVisibility\nAdd README\nCrear repositorio\n\n\n\nDesde la ventana del repositorio creado\nCode <> > Clone > HTTPS > Copiar URL\nDesde VScode\nClonar repositorio (si no aparece F1, paleta de comandos Clonar Repositorio)\nPegar la URL del repo\nPresionar intro (equivalente a git clone)\n\n\n\nRealizar cambios\nDesde la barra derecha seleccionar menú de Git (3 nodos interconectados por dos aristas)\nAgregar presionando el + los archivos a la staging area (equivalente a git add <file>)\nEscribir mensaje de commit y presionar botón de confirmación (equivalente a git commit)\n\n\nUna vez se hayan realizados todos los commits deseados presionar la rueda de sincronización en la barra de estado. Este último cambio es equivalente a ejecutar git pull y git push.\npush sube los cambios al repositorio remoto pull actualiza los cambios de repositorio remoto por el local", "crumbs": [ "Bloque I Introducción", - "Semana 2", - "CSS" + "Semana 1", + "HTML" ] +>>>>>>> e3c3469 (feat: varios) }, { - "objectID": "pages/Bloque1/css.html#git-github", - "href": "pages/Bloque1/css.html#git-github", - "title": "CSS", - "section": "Git & GitHub:", - "text": "Git & GitHub:\nLos comandos de git nos permiten utilizar la cli para gestionar nuestro repositorio\ngit init # Incializa repositorio (= crear repo con GitHub)\ngit clone <url-repo> \n\ngit add <files> # Añade los archivos a la stagging area\ngit commit -m \"<mensaje de commit>\" # commit\n\ngit push # push\ngit pull # pull\n\ngit status # estado actual del repo\ngit log # historia reciente del log con poco detalle de profundidad\n\ngit diff <file> # muestra la diferencia entre la versión modificada ente un archivo y otro", + "objectID": "pages/Bloque1/t1.html", + "href": "pages/Bloque1/t1.html", + "title": "T1: Web de HL I", + "section": "", + "text": "La primera tarea de esta semana consiste en diseñar una página web para el equipo de generación espontánea llamado Hyperloop UPV, la web debe de ser realizada en un archivo HTML y debe de constar por lo menos de los siguientes apartados y estructura\n\nTítulo principal de la página <h1>\nVarios secciones cada una introducida por un título <h2> (si es necesario hacer <h3>)\n\nDescripción del equipo\nLista desordenada de los subsistemas\nLista de Partners por orden de importancia (UPV, )\nUn día en Hyperloop (nótese el título del apartado en cursiva)\n\nBreve descripción de lo que hacemos en el equipo, alguna foto\n\nMiembros\n\nUna tabla de miembros por subsistema (inventarse los datos)\n\nFormulario para solicitar unirse al equipo que solicite\n\nNombre\nApellido\nCurso (radius button)\nBotón de enviar\n\nLink a la web del TC de SW y a la oficial del equipo\n\nCada sección debe de estar contenido en un div de la siguiente forma\n\n<div>\n\n <h2>Títlo de sección</h2>\n\n <Contenido de la sección />\n\n</div>\nBase: Web", "crumbs": [ "Bloque I Introducción", - "Semana 2", - "CSS" + "Semana 1", + "T1: Web de HL I" ] }, { - "objectID": "pages/Bloque1/t2.html", - "href": "pages/Bloque1/t2.html", - "title": "T2: Web de HL II", + "objectID": "pages/Bloque1/MAhtml2.html", + "href": "pages/Bloque1/MAhtml2.html", + "title": "MA: Mas HTML", "section": "", - "text": "El objetivo de esta tarea, es poner en práctica lo aprendido en clase para ello vamos a formatear la web de nuestro equipo de Hyperloop, (tarea de la semana pasada).\nSe debe formatear para que quede como está Web, cuanto más se parezca mejor.\nNotas:\nLa hoja de estilos debe de estar incluida en el la etiqueta <style> del <head>.\nPara conseguir que los bordes de la table, td, tr… colapsen (que solo haya un borde y no dos) se debe utilizar la propiedad border-collapse.\nSi no se realizó la T1, puede utilizar este archivo html como base (click derechao guardar enlace como).", + "text": "Durante la explicación de teoría vista esta semana en clase nos hemos introducido en las etiquetas básicas de HTML.\nA continuación una selección de etiquetas que no hemos visto en clase, pero resulta interesante conocer, puesto que en determinadas ocasiones son útiles. Cada ítem de la lista es un enlace a la documentación de Mozilla donde está explicado el funcionamiento de la etiqueta de forma exhaustiva. No hay que conocer todos los aspectos de cada etiqueta, basta con tener una idea general de como funcionan.\n\ninput types. Muy importante conocer todos los tipos de inputs\ncode\niframe. Útil y ampliamente extendida\nhr. Línea horizontal\nfigure y figcaption. Permite insertar figura y pie de figura.\naudio. Insertar un audio en la página web.\nvideo. Insertar un audio en la página web.\nheader, main, footer. Son como <div> pero ya con usos por defecto preasignados.", "crumbs": [ "Bloque I Introducción", - "Semana 2", - "T2: Web de HL II" + "Semana 1", + "MA: Mas HTML" ] }, { - "objectID": "pages/Bloque2/jsI-reveal.html#introducción-a-js", - "href": "pages/Bloque2/jsI-reveal.html#introducción-a-js", - "title": "Introducción a JS", - "section": "Introducción a JS", - "text": "Introducción a JS\n¿Qué es JavaScript?\n\nEs el lenguaje de programación del navegador.\nCreado en 1995 por Brendan Eich\nPermite crear comportamientos dinámicos: responder a clics, validar formularios, mostrar u ocultar elementos, generar contenido nuevo, etc.\nSe ejecuta directamente en el navegador, sin necesidad de instalación.\nJunto con HTML y CSS forma el trinomio esencial del desarrollo web\n\nLa siguiente tabla recuerda las difrencias entre HTML, CSS y JS:" + "objectID": "pages/Bloque1/entorno-reveal.html#ide", + "href": "pages/Bloque1/entorno-reveal.html#ide", + "title": "Preparación del entorno de trabajo", + "section": "IDE", + "text": "IDE\n¿Qué es una IDE?\nLas Integrated development environment (IDE) son aplicaciones diseñadas para facilitar la programación a los programadores.\nAunque no hay una lista de características propias de las IDE, suelen tener características comunes, por ejemplo:\n\nDebugger integrado en la interfaz\nGestor de archivos\nEditor de código inteligente: autocompletados" }, { - "objectID": "pages/Bloque2/jsI-reveal.html#programación-en-js", - "href": "pages/Bloque2/jsI-reveal.html#programación-en-js", - "title": "Introducción a JS", - "section": "Programación en JS", - "text": "Programación en JS\nCaracterísticas generales de JS\n\nTipado dinámico\n\nTipado débil Coerción Implicita\n\nMultiparadigma\n\nÁmbito léxico (estático)\n\nModelo basado en prototipos (polimorfismo de inclusión por composición)\n\nFunciones de primera clase\n\nFunciones de orden superior" + "objectID": "pages/Bloque1/entorno-reveal.html#node.js-y-npm", + "href": "pages/Bloque1/entorno-reveal.html#node.js-y-npm", + "title": "Preparación del entorno de trabajo", + "section": "Node.JS y NPM", + "text": "Node.JS y NPM\n¿Qué es node JS?\nNode.js es un entorno de ejecución de JavaScript basado en el motor V8 de Google Chrome.\nPermite ejecutar código JavaScript directamente en el sistema operativo, sin depender de un navegador.\nDe este modo, el mismo lenguaje puede usarse tanto en el frontend como en el backend." }, { - "objectID": "pages/Bloque2/jsI.html", - "href": "pages/Bloque2/jsI.html", - "title": "Introducción a JS", + "objectID": "pages/Bloque1/entorno-reveal.html#git-y-github", + "href": "pages/Bloque1/entorno-reveal.html#git-y-github", + "title": "Preparación del entorno de trabajo", + "section": "Git y GitHub", + "text": "Git y GitHub\n¿Qué es Git?\nGit es un sistema de control de versiones distribuido. Permite registrar los cambios de un proyecto, volver a versiones anteriores y trabajar de forma colaborativa sin sobrescribir el trabajo de otros. Cada usuario dispone de una copia completa del repositorio, lo que facilita el trabajo sin conexión." + }, + { + "objectID": "pages/Bloque1/entorno.html", + "href": "pages/Bloque1/entorno.html", + "title": "Preparación del entorno de trabajo", "section": "", - "text": "Contenido" + "text": "Contenido", + "crumbs": [ + "Bloque I Introducción", + "Semana 0", + "Preparación del entorno de trabajo" + ] }, { - "objectID": "pages/Bloque2/jsI.html#introducción-a-js", - "href": "pages/Bloque2/jsI.html#introducción-a-js", - "title": "Introducción a JS", - "section": "Introducción a JS", - "text": "Introducción a JS\n\n¿Qué es JavaScript?\n\nEs el lenguaje de programación del navegador.\nCreado en 1995 por Brendan Eich\nPermite crear comportamientos dinámicos: responder a clics, validar formularios, mostrar u ocultar elementos, generar contenido nuevo, etc.\nSe ejecuta directamente en el navegador, sin necesidad de instalación.\nJunto con HTML y CSS forma el trinomio esencial del desarrollo web\n\nLa siguiente tabla recuerda las difrencias entre HTML, CSS y JS:\n\n\n\nCapa\nLenguaje\nFunción principal\n\n\n\n\nContenido\nHTML\nEstructura del documento\n\n\nPresentación\nCSS\nApariencia y diseño\n\n\nComportamiento\nJavaScript\nInteractividad y lógica" + "objectID": "pages/Bloque1/entorno.html#ide", + "href": "pages/Bloque1/entorno.html#ide", + "title": "Preparación del entorno de trabajo", + "section": "IDE", + "text": "IDE\n\n¿Qué es una IDE?\nLas Integrated development environment (IDE) son aplicaciones diseñadas para facilitar la programación a los programadores.\nAunque no hay una lista de características propias de las IDE, suelen tener características comunes, por ejemplo:\n\nDebugger integrado en la interfaz\nGestor de archivos\nEditor de código inteligente: autocompletados\n\n\n\n¿Cuántas IDE existen?\n\nAndroid Studio\nRStudio\nEclipse\n\n\n\n¿Qué IDE utilizaremos nosotros?\nPrincipalmente trabajaremos con VSCode una IDE de proposito general que configuraremos para el desarrollo frontend\n\nInstalación de VScode\n\nEnlace\n\n\nFamiliarizarse con VSCode\n\nBarra lateral:\n\nExplorador de archivos\nMenú de Git\nMenú de extensiones\nBuscar\nDebugger\n\nEditor o área de edición: componente más importante de la IDE, lugar donde se escribe el código.\n\n\n\nExtensiones\nLas extensiones son aplicaciones software desarolladas por empresas o por particulares para modificar o agregar una nueva funcionalidad a las IDE. Pueden ir desde pequeñas modificaciones del tema o de la UI, o incorporar nuevas funcionalidades como la interacción con bases de datos.\n\nLiveServer\nNosotros para el transcurso del curso utilizaremos la extensión Liveserver que nos permitirá desplegar comodamente un pequeño servidor para la programación con HTML (Ahondaremos más la próxima semana)\n\nInstalación de LiveServer\n\n\nEntrar en el menú de extensiones\nBuscar por liveserver\nSeleccionar extensión\nInstalar\n\n\nAl concluir la instalación debería de aparecer en la parte derecha de la barra de estado (barra interior)", + "crumbs": [ + "Bloque I Introducción", + "Semana 0", + "Preparación del entorno de trabajo" + ] }, { - "objectID": "pages/Bloque2/jsI.html#programación-en-js", - "href": "pages/Bloque2/jsI.html#programación-en-js", - "title": "Introducción a JS", - "section": "Programación en JS", - "text": "Programación en JS\n\nCaracterísticas generales de JS\n\nTipado dinámico\n\nTipado débil Coerción Implicita\n\nMultiparadigma\n\nÁmbito léxico (estático)\n\nModelo basado en prototipos (polimorfismo de inclusión por composición)\n\nFunciones de primera clase\n\nFunciones de orden superior\n\n\nClosures / Copia viva\nReflexión (Reflect, Proxy, descriptores)\n\nMetaprogramación\nSin Polimorfismo Ad-hoc de sobrecarga, ni Polimorfismo universal genérico\n\n\nEjecución single-threaded\n\nAsincronía no bloqueante\n\nPromises / async–await\n\nGarbage collection\nInteroperabilidad con JSON\n\n\n\nTipos\n\nPrimitivos\n\nstring — cadenas de texto\n\nnumber — números (enteros y decimales)\nboolean — verdadero o falso\n\nnull — ausencia intencional de valor\n\nundefined — valor no inicializado\n\nsymbol\nbigint\n\n\n\nTipos de referencia\n\nObject\n\nArray\n\nFunc tion\n\nMap / Set\n\nDate\n\n\n\n\nCaracterísticas del sistema de tipos\n\nTipado dinámico\n\nTipado débil\n\nLos primitivos se copian por valor\n\nLos objetos se copian por referencia\n\n\n\nVariables\n\nlet\n\nTipado: dinámico\nAlcance: estático\nMutables\nHoisting\nNo globales\nShadowing permitido\n\n\n\nconst\nNo son verdaderamente constantes\n\nTipado: dinámico\nAlcance: estático\nInmutables en la referencia (no permiten reasignación)\nHoisting\nNo globales\nShadowing permitido\n\n\n\nvar\nNo se usa\n\nTipado: dinámico\nAlcance: de función (no de bloque)\nMutables\nHoisting (inicializadas como undefined)\nGlobales si se declaran en el ámbito global (propiedad de window/globalThis)\nShadowing permitido, pero con reglas inconsistentes (puede causar illegal shadowing en combinación con let/const)" + "objectID": "pages/Bloque1/entorno.html#node.js-y-npm", + "href": "pages/Bloque1/entorno.html#node.js-y-npm", + "title": "Preparación del entorno de trabajo", + "section": "Node.JS y NPM", + "text": "Node.JS y NPM\n\n¿Qué es node JS?\nNode.js es un entorno de ejecución de JavaScript basado en el motor V8 de Google Chrome.\nPermite ejecutar código JavaScript directamente en el sistema operativo, sin depender de un navegador.\nDe este modo, el mismo lenguaje puede usarse tanto en el frontend como en el backend.\n\n\n¿Qué es NPM?\nNPM (Node Package Manager) es el gestor de paquetes de Node.js.\nFacilita la instalación, actualización y gestión de librerías que amplían las funcionalidades de los proyectos.\nDescarga node y npm nodejs.org", + "crumbs": [ + "Bloque I Introducción", + "Semana 0", + "Preparación del entorno de trabajo" + ] }, { - "objectID": "pages/Bloque2/tia.html", - "href": "pages/Bloque2/tia.html", - "title": "TAI: La objetización de las personas", - "section": "", - "text": "El objetivo de esta tarea es aplicar los conocimientos básicos de programación orientada a objetos en JavaScript, haciendo uso de las clases definidas en ES6. En particular, se evaluará el uso de:\n\nherencia entre clases\nencapsulación mediante propiedades privadas\ngetters y setters usando las palabras clave get y set\nmétodos estáticos\nvalidación de datos\n\nPara ello se definirá una jerarquía de clases que represente un equipo de Hyperloop.", + "objectID": "pages/Bloque1/entorno.html#git-y-github", + "href": "pages/Bloque1/entorno.html#git-y-github", + "title": "Preparación del entorno de trabajo", + "section": "Git y GitHub", + "text": "Git y GitHub\n\n¿Qué es Git?\nGit es un sistema de control de versiones distribuido. Permite registrar los cambios de un proyecto, volver a versiones anteriores y trabajar de forma colaborativa sin sobrescribir el trabajo de otros. Cada usuario dispone de una copia completa del repositorio, lo que facilita el trabajo sin conexión.\n\n\n¿Qué es GitHub?\nGitHub es una plataforma en la nube que utiliza Git para almacenar y gestionar proyectos. Permite compartir código, colaborar con otros desarrolladores y mantener un control de versiones centralizado.\n\n\nGit frente GitHub\n\nGit es la herramienta de control de versiones.(Software Libre, Linux Fundation)\nGitHub es la plataforma online donde se alojan los repositorios y se facilita el trabajo en equipo. (Coporativa Microsoft)\n\n\n\nUso de Git y GitHub\nEn Hyperloop UPV, tanto en los subsistemas de Software y Firmware utilizamos GitHub como herramienta de gestión de código.\nNosotros en el TC, también trataremos de facilitarnos con esta herramienta\n\n\nInstalación de Git y Cuenta de GitHub\n\nInstalación de Git\nCuenta de GitHub\n\n\n\nDiagrama de trabajo de Git\n\n\nGit en VScode", "crumbs": [ - "Bloque II Programación", - "Repaso Intensivo", - "TAI: La objetización de las personas" + "Bloque I Introducción", + "Semana 0", + "Preparación del entorno de trabajo" ] }, { - "objectID": "pages/Bloque2/tia.html#objetivo-de-la-tarea", - "href": "pages/Bloque2/tia.html#objetivo-de-la-tarea", - "title": "TAI: La objetización de las personas", + "objectID": "pages/rubric.html", + "href": "pages/rubric.html", + "title": "Rúbrica de evaluación", "section": "", - "text": "El objetivo de esta tarea es aplicar los conocimientos básicos de programación orientada a objetos en JavaScript, haciendo uso de las clases definidas en ES6. En particular, se evaluará el uso de:\n\nherencia entre clases\nencapsulación mediante propiedades privadas\ngetters y setters usando las palabras clave get y set\nmétodos estáticos\nvalidación de datos\n\nPara ello se definirá una jerarquía de clases que represente un equipo de Hyperloop.", + "text": "Durante el curso seguiremos la siguiente rúbrica para la calificación de las tareas. A pesar de que las calificaciones no son importantes, la rúbrica es un buen recordatorio de que aspectos hay que tener en cuenta en la programación web.\n\n\n\nPuntuación\n\n\nNo aplica\n\n\nDeficiente(0–4)\n\n\nInsuficiente(4–5)\n\n\nAceptable(5–7)\n\n\nBueno(7–9)\n\n\nExcelente(9–10)\n\n\n\n\nDiseño\n\n\nNo aplica.\n\n\nDiseño desordenado y/o con problemas de visualización funcional.\n\n\nDiseño básico pero con problemas de visualización o estructura.\n\n\nDiseño claro y ordenado, cumple los requisitos básicos.\n\n\nDiseño cuidado, buena estética y estructura clara.\n\n\nDiseño profesional, limpio, pulido y sobresaliente.\n\n\n\n\nProgramación\n\n\nNo aplica.\n\n\nCódigo incompleto o con errores graves.\n\n\nCódigo funcional parcialmente y/o con errores importantes.\n\n\nCódigo funcional y adecuado a la tarea.\n\n\nCódigo bien estructurado con mejoras respecto a lo exigido.\n\n\nCódigo impecable, eficiente y muy bien organizado.\n\n\n\n\nEsfuerzo e implicación\n\n\nNo aplica.\n\n\nBajo esfuerzo o dedicación mínima.\n\n\nEsfuerzo adecuado pero limitado.\n\n\nEsfuerzo notable, cumple con lo requerido.\n\n\nEsfuerzo claro, trabajo más allá de lo solicitado.\n\n\nDedicación sobresaliente y trabajo excepcional.\n\n\n\n\nDocumentación / Claridad\n\n\nNo aplica.\n\n\nDocumentación mínima o inexistente.\n\n\nDocumentación incompleta o confusa.\n\n\nDocumentación clara y suficiente.\n\n\nDocumentación bien presentada y detallada.\n\n\nDocumentación excelente y altamente profesional.\n\n\n\n\nFuncionalidad\n\n\nNo aplica.\n\n\nNo funciona o no cumple objetivos.\n\n\nFunciona de forma parcial.\n\n\nFunciona correctamente.\n\n\nFunciona con mejoras o funcionalidades extra.\n\n\nFunciona perfectamente y supera expectativas.\n\n\n\n\nInnovación\n\n\n(Nota extra)\n\n\n\n\nTOTAL:\n\n\n\n\n/60\n\n\n\n\nObservaciones:\n\n\n\n\n\nLa nota total será sobre 60 si hay algun criterio que no se aplique, se modificará la nota para que esté sobre base 60.", "crumbs": [ - "Bloque II Programación", - "Repaso Intensivo", - "TAI: La objetización de las personas" + "Rúbrica de evaluación" ] }, { - "objectID": "pages/Bloque2/tia.html#entregar", - "href": "pages/Bloque2/tia.html#entregar", - "title": "TAI: La objetización de las personas", - "section": "Entregar", - "text": "Entregar\nSe debe entregar un único archivo de JavaScript (.js) que contenga la solución completa a la tarea.", + "objectID": "pages/Bloque2/ti.html", + "href": "pages/Bloque2/ti.html", + "title": "TI: Ejercicios JS", + "section": "", + "text": "El objetivo de estos ejercicios es repasar aquellas funcionalidades de JavaScript que difieren del resto de lenguajes de programación empirica, por lo que los siguentes ejercicios de DEBEN DE RESOLVER SIN UTILIZAR NINGUNA CONDICIONAL NI NINGÚN BUCLE.\nPrincipalmente trabajarás con:\nDebe de realizar la tarea enun archivo js, para comprobar el resultado debe de ejecutar desde la terminal con node nombreArchivo.js.", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TAI: La objetización de las personas" + "TI: Ejercicios JS" ] }, { - "objectID": "pages/Bloque2/tia.html#realización-de-la-tarea", - "href": "pages/Bloque2/tia.html#realización-de-la-tarea", - "title": "TAI: La objetización de las personas", - "section": "Realización de la tarea", - "text": "Realización de la tarea\nEl archivo JavaScript debe estar claramente dividido en dos partes:\n\nla implementación de clases, donde se definirán todas las clases necesarias\n\nla zona de uso, donde se utilizarán las clases previamente definidas\n\n\nImplementación de clases\nTodas las clases deberán definirse utilizando la sintaxis de clases ES6, haciendo uso correcto de:\n\nclass\nextends\nsuper\npropiedades privadas (usando #)\ngetters y setters (get y set)\nmétodos estáticos\n\n\nClase Person\nDebe contener:\n\npropiedad privada name\npropiedad privada dni\nSe puede obtener tanto el nombre como el DNI, pero solo se puede modificar el nombre\nEl constructor recibirá:\n\nun nombre\nun NÚMERO de DNI\n\nEl constructor deberá calcular automáticamente la letra del DNI siguiendo el algoritmo oficial:\nhttps://www.interior.gob.es/opencms/es/servicios-al-ciudadano/tramites-y-gestiones/dni/calculo-del-digito-de-control-del-nif-nie/\nMétodos y accesos:\n\ngetter name\nsetter name\ngetter dni\nmétodo getInfo() que devuelva un string con el nombre y el DNI completo\n\nSi los datos introducidos no son válidos, se lanzará un Error\n\n\n\nClase Member (clase hija de Person)\nRepresenta a un miembro del equipo de Hyperloop.\nDebe contener:\n\npropiedad privada department\npropiedad privada yearsExperience\n\n\nDepartamentos válidos\nLos únicos departamentos permitidos son:\n\n\"Managment\"\n\"Operaciones\"\n\"Avionics\"\n\"Electromagnetics\"\n\"Mechanics\"\n\nNo se permitirá ningún otro valor.\n\n\nRequisitos adicionales\n\nLa propiedad department:\n\nse accederá mediante:\n\ngetter department\nsetter department\n\n\nEl setter validará que el departamento sea válido\nyearsExperience debe ser un número mayor o igual que 0\n\n\n\nMétodo estático obligatorio\nLa clase Member debe incluir el siguiente método estático:\n\nisValidDepartment(department)\n\ndevuelve true si el departamento es válido\ndevuelve false en caso contrario\ndeberá utilizarse tanto en el constructor como en el setter de department\n\n\n\n\nMétodos públicos\n\ngetter yearsExperience\nmétodo getInfo():\n\nsobrescribe el método de Person\nincluye el departamento y los años de experiencia\n\n\n\n\n\nClase Engineer (clase hija de Member)\nRepresenta a un ingeniero del equipo.\nDebe contener:\n\npropiedad privada specialty\nLa especialidad será un string no vacío\n\n\nAccesos y métodos\n\ngetter specialty\nmétodo getInfo():\n\nsobrescribe el método anterior\nincluye la especialidad del ingeniero\n\n\n\n\n\nClase Team\nRepresenta el equipo completo de Hyperloop.\nDebe contener:\n\npropiedad privada members, que será un array de objetos Member\n\n\nMétodos públicos\n\naddMember(member)\n\nsolo permite añadir objetos que sean instancia de Member\n\nremoveMemberByDni(dni)\nlistMembers()\n\nmuestra por consola la información de todos los miembros del equipo\n\ncountMembersByDepartment(department)\n\ndevuelve cuántos miembros pertenecen a un determinado departamento\n\n\n\n\n\n\nZona de uso\nEn la zona de uso del archivo JavaScript se debe:\n\nCrear al menos:\n\n2 objetos Engineer de departamentos distintos\n1 objeto Member que no sea ingeniero\n\nCrear un objeto Team\nAñadir los miembros al equipo\nUtilizar explícitamente:\n\ngetters\nsetters\nel método estático de validación\n\nMostrar por consola:\n\nel listado completo del equipo\nel número de miembros por departamento\n\nProbar al menos un caso incorrecto:\n\npor ejemplo, asignar un departamento no válido\no intentar añadir un objeto que no sea Member\n\nDemostrar que el error se gestiona correctamente", + "objectID": "pages/Bloque2/ti.html#ejercicio-1", + "href": "pages/Bloque2/ti.html#ejercicio-1", + "title": "TI: Ejercicios JS", + "section": "Ejercicio 1", + "text": "Ejercicio 1\nDefina un array llamado arrOriginal con el siguiente contenido numérico. Este array será el origen de datos para los ejercicios posteriores, salvo que se indique lo contrario.\n3, 4, 2, 4, 4, 5, 12, 24, 3, 23, 232, 2, -3, -9, 2, -23, 200, -23, 12, 43, 4, -32, -32, 0, 23, 23", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TAI: La objetización de las personas" + "TI: Ejercicios JS" ] }, { - "objectID": "pages/Bloque2/tia.html#apéndice-comprobaciones-y-errores-en-javascript-necesario-para-la-tarea", - "href": "pages/Bloque2/tia.html#apéndice-comprobaciones-y-errores-en-javascript-necesario-para-la-tarea", - "title": "TAI: La objetización de las personas", - "section": "Apéndice: comprobaciones y errores en JavaScript (NECESARIO PARA LA TAREA)", - "text": "Apéndice: comprobaciones y errores en JavaScript (NECESARIO PARA LA TAREA)\nEn el desarrollo de la tarea pueden aparecer algunas comprobaciones y mecanismos de control de errores que es necesario saber implementar por cuenta propia. Su inclusión tiene como objetivo facilitar la robustez del código, y forman parte de los contenidos evaluables de la tarea.\n\nUso de Error\nCuando se detecta una situación incorrecta (por ejemplo, un valor no válido o un uso indebido de una clase), se puede lanzar un error utilizando:\nthrow new Error(\"Mensaje de error\");\nEsto indica claramente que algo no es correcto y detiene la ejecución normal del programa.\n\n\nUso de instanceof\nEl operador instanceof se utiliza para comprobar si un objeto ha sido creado a partir de una clase concreta.\nobjeto instanceof Clase\nDevuelve true si el objeto pertenece a esa clase y false en caso contrario.\n\n\nUso de typeof\nEl operador typeof permite comprobar el tipo de datos simples como strings o números.\ntypeof variable\nEjemplos:\ntypeof \"texto\" // \"string\"\ntypeof 10 // \"number\"\nSe utiliza para validar los datos recibidos por constructores o setters. Para comprobar clases u objetos personalizados debe usarse instanceof, no typeof.", + "objectID": "pages/Bloque2/ti.html#ejercicio-2", + "href": "pages/Bloque2/ti.html#ejercicio-2", + "title": "TI: Ejercicios JS", + "section": "Ejercicio 2", + "text": "Ejercicio 2\nPartiendo del array arrOriginal, imprima por pantalla la siguiente frase:\n\n\"En el subsistema de software somos x miembros\"\n\ndonde x debe tomar, sucesivamente, cada uno de los valores de arrOriginal.\nImprima por pantalla el resultado.\n\nSalida esperada (ejemplo):\n\nEn el subsistema de software somos 3 miembros\nEn el subsistema de software somos 4 miembros\nEn el subsistema de software somos 2 miembros", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "TAI: La objetización de las personas" + "TI: Ejercicios JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html", - "href": "pages/Bloque2/MAclases.html", - "title": "MA: Clases ES6", - "section": "", - "text": "Contenido\nRepaso intensivo de clases en JavaScript (ES6+), orientado a usuarios con experiencia previa en programación y familiarizados con funciones, objetos y arrays.", + "objectID": "pages/Bloque2/ti.html#ejercicio-3", + "href": "pages/Bloque2/ti.html#ejercicio-3", + "title": "TI: Ejercicios JS", + "section": "Ejercicio 3", + "text": "Ejercicio 3\nPartiendo de arrOriginal, cree un nuevo array llamado arrPositivos que contenga únicamente números positivos.\nUtilice arrPositivos para imprimir por pantalla las frases correspondientes.", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "TI: Ejercicios JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#programación-orientada-a-objetos-en-javascript", - "href": "pages/Bloque2/MAclases.html#programación-orientada-a-objetos-en-javascript", - "title": "MA: Clases ES6", - "section": "Programación orientada a objetos en JavaScript", - "text": "Programación orientada a objetos en JavaScript\nJavaScript es un lenguaje basado en prototipos, pero desde ES6 introduce la sintaxis class, que:\n\nEs azúcar sintáctico sobre el sistema de prototipos\nFacilita la escritura y lectura de código OO\nNo convierte a JS en un lenguaje basado en clases clásicas", + "objectID": "pages/Bloque2/ti.html#ejercicio-4", + "href": "pages/Bloque2/ti.html#ejercicio-4", + "title": "TI: Ejercicios JS", + "section": "Ejercicio 4", + "text": "Ejercicio 4\nPartiendo de arrPositivos, cree un nuevo array llamado arrValidos que cumpla además el siguiente criterio:\n\nEl número máximo de personas es 10\n\nImprima por pantalla las frases correspondientes a arrValidos.", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "TI: Ejercicios JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#definición-de-una-clase", - "href": "pages/Bloque2/MAclases.html#definición-de-una-clase", - "title": "MA: Clases ES6", - "section": "Definición de una clase", - "text": "Definición de una clase\n\nSintaxis básica\nclass Persona {\n constructor(nombre, edad) {\n this.nombre = nombre;\n this.edad = edad;\n }\n}\n\nclass: palabra clave\nconstructor: método especial de inicialización\nthis: referencia a la instancia actual", + "objectID": "pages/Bloque2/ti.html#ejercicio-5", + "href": "pages/Bloque2/ti.html#ejercicio-5", + "title": "TI: Ejercicios JS", + "section": "Ejercicio 5", + "text": "Ejercicio 5\nPartiendo nuevamente de arrOriginal, cree un nuevo array llamado arrFiltrado que contenga únicamente aquellos elementos que cumplan todas las siguientes condiciones:\n\nSean positivos\n\nSean pares\n\nSean menores que 100", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "TI: Ejercicios JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#creación-de-instancias", - "href": "pages/Bloque2/MAclases.html#creación-de-instancias", - "title": "MA: Clases ES6", - "section": "Creación de instancias", - "text": "Creación de instancias\nconst p1 = new Persona(\"Javier\", 45);\nconst p2 = new Persona(\"Ana\", 32);\n\nnew crea un nuevo objeto\nEjecuta automáticamente constructor", + "objectID": "pages/Bloque2/ti.html#ejercicio-6", + "href": "pages/Bloque2/ti.html#ejercicio-6", + "title": "TI: Ejercicios JS", + "section": "Ejercicio 6", + "text": "Ejercicio 6\nPartiendo de arrFiltrado:\n\nCree un nuevo array llamado arrCubos elevando al cubo cada uno de sus elementos\n\nA partir de arrCubos, cree un nuevo array llamado arrCubosFiltrados que contenga únicamente aquellos valores cuyo resultado termine en 0.", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "TI: Ejercicios JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#métodos-de-instancia", - "href": "pages/Bloque2/MAclases.html#métodos-de-instancia", - "title": "MA: Clases ES6", - "section": "Métodos de instancia", - "text": "Métodos de instancia\nLos métodos se definen sin function y se comparten vía prototipo.\nclass Persona {\n constructor(nombre, edad) {\n this.nombre = nombre;\n this.edad = edad;\n }\n\n saludar() {\n return `Hola, soy ${this.nombre}`;\n }\n\n cumple() {\n this.edad++;\n }\n}\nUso:\np1.saludar();\np1.cumple();", + "objectID": "pages/Bloque2/ti.html#ejercicio-7", + "href": "pages/Bloque2/ti.html#ejercicio-7", + "title": "TI: Ejercicios JS", + "section": "Ejercicio 7", + "text": "Ejercicio 7\nPartiendo de arrCubosFiltrados, cree un nuevo array llamado arrFinal añadiendo el valor 21.", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "TI: Ejercicios JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#métodos-vs-funciones-flecha", - "href": "pages/Bloque2/MAclases.html#métodos-vs-funciones-flecha", - "title": "MA: Clases ES6", - "section": "Métodos vs funciones flecha", - "text": "Métodos vs funciones flecha\nNo usar arrow functions como métodos de clase (salvo casos concretos):\nclass MalEjemplo {\n metodo = () => {\n console.log(this);\n };\n}\n\nRompe el modelo prototípico\nMayor consumo de memoria", + "objectID": "pages/Bloque2/ti.html#ejercicio-8", + "href": "pages/Bloque2/ti.html#ejercicio-8", + "title": "TI: Ejercicios JS", + "section": "Ejercicio 8", + "text": "Ejercicio 8\nPartiendo de arrFinal, cree un nuevo array independiente llamado arrCopia, de forma que cualquier modificación posterior no afecte a arrFinal.", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "TI: Ejercicios JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#propiedades-públicas", - "href": "pages/Bloque2/MAclases.html#propiedades-públicas", - "title": "MA: Clases ES6", - "section": "Propiedades públicas", - "text": "Propiedades públicas\nLas propiedades se suelen declarar en el constructor:\nclass Coche {\n constructor(marca, km = 0) {\n this.marca = marca;\n this.km = km;\n }\n}\nUso:\nconst c = new Coche(\"Toyota\");\nc.km += 100;", + "objectID": "pages/Bloque2/intensivo.html", + "href": "pages/Bloque2/intensivo.html", + "title": "Repaso Intensivo JS", + "section": "", + "text": "Contenido\nRepaso intensivo de JavaScript, tiene como objetivo dar una introducción del lenguaje, a usuarios que ya tengan experiencia previa programando.\nDescargar archivo de código (click derecho guardar enlace como)", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "Repaso Intensivo JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#getters-y-setters", - "href": "pages/Bloque2/MAclases.html#getters-y-setters", - "title": "MA: Clases ES6", - "section": "Getters y setters", - "text": "Getters y setters\nPermiten acceder como propiedades a lógica encapsulada.\nclass Rectangulo {\n constructor(ancho, alto) {\n this.ancho = ancho;\n this.alto = alto;\n }\n\n get area() {\n return this.ancho * this.alto;\n }\n\n set escala(factor) {\n this.ancho *= factor;\n this.alto *= factor;\n }\n}\nUso:\nconst r = new Rectangulo(2, 3);\nr.area; // 6\nr.escala = 2;\nr.area; // 24", + "objectID": "pages/Bloque2/intensivo.html#variables-y-tipos-básicos", + "href": "pages/Bloque2/intensivo.html#variables-y-tipos-básicos", + "title": "Repaso Intensivo JS", + "section": "Variables y tipos básicos", + "text": "Variables y tipos básicos\n\nDeclaración de variables\nEn JavaScript moderno se utilizan let y const (evitar var).\n\nlet: permite reasignación\nconst: no permite reasignación\nconst NO significa inmutable\nJavaScript es de tipado dinámico\nEl tipo depende del valor, no de la variable\n\nTipos primitivos:\n\nstring\nnumber\nboolean\nnull\nundefined\n\nlet edad = 12; // number\nlet altura = 1.8; // number\nlet nombre = \"Javier\"; // string\nlet casado = false; // boolean\n\nlet ordenador = null; // ausencia intencionada de valor\nlet direccion; // undefined\n\n\nUso de const\nconst dni = \"1235678L\";\ndni = \"23\"; // Error\n\nconst no significa inmutable\nconst dni = \"12345678L\";\ndni = \"87654321X\"; // Error\nPero:\nconst arr = [1, 2, 3];\narr.push(4); // permitido\n\n\n\nTipado dinámico\n\nJavaScript es de tipado dinámico\nEl tipo depende del valor, no de la variable\nUna variable puede cambiar de tipo durante la ejecución\n\nlet x = \"hola\";\nx = 42; // válido\nx = true; // válido\nEste comportamiento se conoce como shadowing o cambio dinámico de tipo. En el ejemplo anterior solo existe una variable X cuyo tipo pasa de Number a boolean", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "Repaso Intensivo JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#herencia-extends", - "href": "pages/Bloque2/MAclases.html#herencia-extends", - "title": "MA: Clases ES6", - "section": "Herencia (extends)", - "text": "Herencia (extends)\nJavaScript soporta herencia simple.\nclass Empleado extends Persona {\n constructor(nombre, edad, salario) {\n super(nombre, edad);\n this.salario = salario;\n }\n\n salarioAnual() {\n return this.salario * 12;\n }\n}\n\nextends: herencia\nsuper(): llama al constructor padre (obligatorio)", + "objectID": "pages/Bloque2/intensivo.html#null-vs-undefined", + "href": "pages/Bloque2/intensivo.html#null-vs-undefined", + "title": "Repaso Intensivo JS", + "section": "null vs undefined", + "text": "null vs undefined\n\nundefined: variable declarada pero sin valor\nnull: ausencia intencionada de valor\n\nJavaScript distingue entre:\n\n“todavía no hay valor” y “no hay valor”\n\nconsole.log(ordenador); // null\nconsole.log(direccion); // undefined", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "Repaso Intensivo JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#sobrescritura-de-métodos", - "href": "pages/Bloque2/MAclases.html#sobrescritura-de-métodos", - "title": "MA: Clases ES6", - "section": "Sobrescritura de métodos", - "text": "Sobrescritura de métodos\nclass Empleado extends Persona {\n saludar() {\n return `Empleado: ${this.nombre}`;\n }\n}\n\nSi el método existe en la clase hija, sobrescribe al del padre", + "objectID": "pages/Bloque2/intensivo.html#aritmética-y-operadores", + "href": "pages/Bloque2/intensivo.html#aritmética-y-operadores", + "title": "Repaso Intensivo JS", + "section": "Aritmética y operadores", + "text": "Aritmética y operadores\n\nOperadores aritméticos\nlet a = 12, b = 4;\n\na + b\na - b\na * b\na / b\na % b\na = a + b;\na += b;\na -= b;\na *= b;\n\nPotencias\na**b // Power\nIncrementos:\nb--; b++;\n--b; ++b;\n\n\n\nStrings y concatenación\na = \"hola \";\nb = \"mundo\";\na + b;\n\n\nComparación\n\n== compara valor (evitar)\n=== compara valor y tipo (usar)\n\n\n\nOperadores lógicos\n\n&& AND\n|| OR\n! NOT\n\n\n\nComparaciones\n\n== compara solo valor (evitar)\n=== compara valor y tipo (usar siempre, aunque sea innecesario)\n\n5 == \"5\"; // true\n5 === \"5\"; // false\n\n\nOperadores lógicos\n\n&& AND\n|| OR\n! NOT\n\n(a > 0) && (b < 10)", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "Repaso Intensivo JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#uso-de-super-en-métodos", - "href": "pages/Bloque2/MAclases.html#uso-de-super-en-métodos", - "title": "MA: Clases ES6", - "section": "Uso de super en métodos", - "text": "Uso de super en métodos\nclass Empleado extends Persona {\n saludar() {\n return super.saludar() + \" (empleado)\";\n }\n}\nPermite reutilizar lógica del padre.", + "objectID": "pages/Bloque2/intensivo.html#estructuras-de-control", + "href": "pages/Bloque2/intensivo.html#estructuras-de-control", + "title": "Repaso Intensivo JS", + "section": "Estructuras de control", + "text": "Estructuras de control\n\nCondicionales\nif (a === b) {\n\n} else if (a > b) {\n\n} else {\n\n}\n\n\nBucles\n\nwhile\nlet x = 20;\nwhile (x < 50) {\n x += 10;\n}\n\n\nfor\nfor (let i = 0; i < 10; i++) {\n // iteración\n}", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "Repaso Intensivo JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#métodos-estáticos", - "href": "pages/Bloque2/MAclases.html#métodos-estáticos", - "title": "MA: Clases ES6", - "section": "Métodos estáticos", - "text": "Métodos estáticos\nPertenecen a la clase, no a las instancias.\nclass Utilidades {\n static suma(a, b) {\n return a + b;\n }\n}\nUso:\nUtilidades.suma(2, 3);\nNo accesible desde instancias:\nnew Utilidades().suma; // undefined", + "objectID": "pages/Bloque2/intensivo.html#funciones", + "href": "pages/Bloque2/intensivo.html#funciones", + "title": "Repaso Intensivo JS", + "section": "Funciones", + "text": "Funciones\n\nEncapsulan lógica reutilizable\nPueden recibir parámetros\nPueden devolver valores\nSon ciudadanos de primera clase\n\n\nFunción clásica\nfunction sumar2(num, num2 = 2) {\n num += num2;\n return num;\n}\nPaso de variables por valor:\nlet a = 7;\nlet b = sumar2(a, a); // 14\na; // 7\n\n\nFunciones flecha y orden superior\nconst concatenarHola = input => input + \" Hola\";\nconcatenarHola(\"sdf\");\nfunction ejecuta(fun) {\n fun();\n}\n\nejecuta(() => { console.log(\"hola\"); });\n\n\nFunciones propias de strings\nlet a = \"jsadfsadf \";\na.trim(); // Suprimir espacios adicionales\na.split('a'); // Divide el string en un array c\na.length;\n\n\nFunciones flecha\nconst cuadrado = n => n ** 2;\nForma extendida:\nconst cuadrado = (n) => {\n return n ** 2;\n};\n\n\nFunciones como ciudadanos de primera clase\nLas funciones pueden:\n\nAsignarse a variables\nPasarse como argumentos\nDevolverse como resultado\n\nfunction ejecutar(f) {\n f();\n}\n\nejecutar(() => console.log(\"Hola\"));", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "Repaso Intensivo JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#campos-privados", - "href": "pages/Bloque2/MAclases.html#campos-privados", - "title": "MA: Clases ES6", - "section": "Campos privados (#)", - "text": "Campos privados (#)\nIntroducidos en ES2022.\nclass Cuenta {\n #saldo = 0;\n\n ingresar(cantidad) {\n this.#saldo += cantidad;\n }\n\n getSaldo() {\n return this.#saldo;\n }\n}\n\n#saldo es realmente privado\nNo accesible fuera de la clase", + "objectID": "pages/Bloque2/intensivo.html#arrays-base", + "href": "pages/Bloque2/intensivo.html#arrays-base", + "title": "Repaso Intensivo JS", + "section": "Arrays (base)", + "text": "Arrays (base)\n\nLista ordenada\nÍndices empiezan en 0\nPropiedad length\n\nlet cajon = [8, \"hola\", true, () => { return 7 }];\n\nAcceso\ncajon[0] // 8\ncajon[2] = \"rino\"; // modificamos la entrada 2 \n\n\nAdiciones\ncajon.push(false);\ncajon.unshift(0);\n\n\nEliminaciones\ncajon.pop();\ncajon.shift();\ncajon.length;", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "Repaso Intensivo JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#clases-y-objetos-literales", - "href": "pages/Bloque2/MAclases.html#clases-y-objetos-literales", - "title": "MA: Clases ES6", - "section": "Clases y objetos literales", - "text": "Clases y objetos literales\nEsto:\nconst a = {\n x: 1,\n inc() { this.x++; }\n};\nEs equivalente conceptualmente a una instancia única.\nUsar class cuando:\n\nHay múltiples instancias\nExiste estado y comportamiento común\nSe necesita herencia o abstracción", + "objectID": "pages/Bloque2/intensivo.html#objetos", + "href": "pages/Bloque2/intensivo.html#objetos", + "title": "Repaso Intensivo JS", + "section": "Objetos", + "text": "Objetos\nUn objeto representa una entidad mediante estructura clave–valor.\nlet gente = { pepe: 7, juanes: 8, andreas: 10, fran: [4, 2] };\n\nModificación\ngente.andreas = 32;\ngente.pepe++;\n\n\nAcceso dinámico\nlet nombre = \"pablo\";\n\ngente.nombre; // undefined\ngente[nombre] = 2; // añade propiedad", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "Repaso Intensivo JS" ] }, { - "objectID": "pages/Bloque2/MAclases.html#clases-prototípicas-pre-es6", - "href": "pages/Bloque2/MAclases.html#clases-prototípicas-pre-es6", - "title": "MA: Clases ES6", - "section": "Clases prototípicas (pre-ES6)", - "text": "Clases prototípicas (pre-ES6)\nJavaScript siempre ha sido un lenguaje basado en prototipos. Antes de ES6, la creación de objetos y herencia se realizaba mediante funciones constructoras y el prototipo.\nEn este repaso no entraremos en detalle en este modelo.\nBasta con saber que:\n\nLas clases ES6 no sustituyen al modelo prototípico\nSon una capa de abstracción sobre él\nTodo el comportamiento sigue resolviéndose vía prototipos\n\nPara profundizar:\n\nhttps://developer.mozilla.org/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\n\nfunction Persona(nombre) {\nthis.nombre = nombre;\n}\n\nPersona.prototype.saludar = function () {\nreturn this.nombre;\n};\nvs\nclass Persona {\n constructor(nombre) {\n this.nombre = nombre;\n }\n\n saludar() {\n return this.nombre;\n }\n}", + "objectID": "pages/Bloque2/intensivo.html#referencias-vs-valores", + "href": "pages/Bloque2/intensivo.html#referencias-vs-valores", + "title": "Repaso Intensivo JS", + "section": "Referencias vs valores", + "text": "Referencias vs valores\n\nCopia por valor\nlet a = 5;\nlet b = a;\nb++;\na no cambia.\n\n\nCopia por referencia\nlet e3 = [\"juan\", \"pepe\"];\nlet d = e3;\n\nd.push(\"andrés\");\nAmbas variables apuntan al mismo array.\nconst poblacion = gente;\npoblacion[\"julio\"] = 8;\nLa copia por refencia se aplica a objetos y arrays\nlet x = [\"juan\", \"pepe\"];\nlet y = x;\n\ny.push(\"andrés\"); // Se añade en x e y pues son el mismo objeto\nAmbas variables apuntan al mismo objeto.", "crumbs": [ "Bloque II Programación", "Repaso Intensivo", - "MA: Clases ES6" + "Repaso Intensivo JS" ] }, { - "objectID": "pages/Bloque3/ps.html", - "href": "pages/Bloque3/ps.html", - "title": "Proyecto Subsistema", - "section": "", - "text": "Desarrollar una pequeña aplicación web para gestionar una lista de tareas utilizando HTML, CSS y JavaScript, trabajando directamente con el DOM.\nbase", + "objectID": "pages/Bloque2/intensivo.html#spread-operator-...", + "href": "pages/Bloque2/intensivo.html#spread-operator-...", + "title": "Repaso Intensivo JS", + "section": "Spread operator (...)", + "text": "Spread operator (...)\n\nExpande arrays u objetos\nPermite copiar y combinar\nCopia superficial\n\n\nArrays\nJavier es añadido a arr2, pero no a arr.\nlet arr = [\"Alice\", \"Bob\", \"Kevin\"];\nlet arr2 = [...arr, \"Javier\"];\n\n\nObjetos\nOcurre lo mismo con los objetos\nconst sociedad = { ...poblacion, julia: 12 };", "crumbs": [ - "Bloque III Interacción", - "Semana 7", - "Proyecto Subsistema" + "Bloque II Programación", + "Repaso Intensivo", + "Repaso Intensivo JS" ] }, { - "objectID": "pages/Bloque3/ps.html#objetivo", - "href": "pages/Bloque3/ps.html#objetivo", - "title": "Proyecto Subsistema", - "section": "", - "text": "Desarrollar una pequeña aplicación web para gestionar una lista de tareas utilizando HTML, CSS y JavaScript, trabajando directamente con el DOM.\nbase", + "objectID": "pages/Bloque2/intensivo.html#funciones-de-array-js-moderno", + "href": "pages/Bloque2/intensivo.html#funciones-de-array-js-moderno", + "title": "Repaso Intensivo JS", + "section": "Funciones de array (JS moderno)", + "text": "Funciones de array (JS moderno)\nVamos a trabajar con un ejemplo completo, típico en programación funcional.\n\nDatos de partida\nlet y = [2, 4, 6, 7];\n\n\nFunción cuadrado\nDefinimos una función que, dado un número, devuelve su cuadrado:\nconst cuadrado = n => n ** 2;\nEs equivalente a:\nconst cuadrado = (n) => {\n return n ** 2;\n};\n\n\nmap: transformar elementos\nAplicamos map para obtener un nuevo array con los cuadrados:\nconst y2 = y.map(cuadrado);\nResultado:\n[4, 16, 36, 49]\n\n\nfilter: seleccionar elementos\nDefinimos una función que comprueba si un número es par:\nconst even = n => n % 2 === 0;\nLa usamos con filter:\nconst yEven = y.filter(even);\n\n\nEncadenamiento (estilo declarativo)\nPodemos encadenar ambas operaciones:\ny\n .map(n => n ** 2)\n .filter(n => n % 2 === 0);\n\nEste estilo es declarativo: describimos qué queremos hacer con los datos, no cómo recorrerlos.", "crumbs": [ - "Bloque III Interacción", - "Semana 7", - "Proyecto Subsistema" + "Bloque II Programación", + "Repaso Intensivo", + "Repaso Intensivo JS" ] }, { - "objectID": "pages/Bloque3/ps.html#qué-se-quiere-hacer", - "href": "pages/Bloque3/ps.html#qué-se-quiere-hacer", - "title": "Proyecto Subsistema", - "section": "Qué se quiere hacer", - "text": "Qué se quiere hacer\n\nCrear una página web que permita añadir tareas.\nCada tarea debe tener:\n\nUn texto descriptivo.\nUn responsable (Software, Hardware, Partners, Otros).\n\nLas tareas deben mostrarse en una lista.\nAl hacer click sobre una tarea, esta debe eliminarse.\nLa página no debe recargarse al añadir o eliminar tareas.", - "crumbs": [ - "Bloque III Interacción", - "Semana 7", - "Proyecto Subsistema" - ] + "objectID": "pages/Bloque3/intermedio.html#controlled-inputs", + "href": "pages/Bloque3/intermedio.html#controlled-inputs", + "title": "React III", + "section": "Controlled Inputs", + "text": "Controlled Inputs\nMotivación\nHasta ahora se ha trabajado con eventos capturando acciones del usuario.\nSin embargo, al trabajar con formularios surge una cuestión fundamental:\n\n¿Quién controla el valor del input?\n¿El DOM o React?" }, { - "objectID": "pages/Bloque3/ps.html#requisitos-técnicos", - "href": "pages/Bloque3/ps.html#requisitos-técnicos", - "title": "Proyecto Subsistema", - "section": "Requisitos técnicos", - "text": "Requisitos técnicos\n\nLa lógica debe implementarse manipulando el DOM directamente (document.createElement, appendChild, addEventListener, etc.).\nHTML básico para la estructura.\nCSS libre, se espera que se use de forma creativa para mejorar el diseño.\nJavaScript en un archivo separado o en un <script>.", - "crumbs": [ - "Bloque III Interacción", - "Semana 7", - "Proyecto Subsistema" - ] + "objectID": "pages/Bloque3/intermedio.html#hooks-repaso", + "href": "pages/Bloque3/intermedio.html#hooks-repaso", + "title": "React III", + "section": "Hooks (Repaso)", + "text": "Hooks (Repaso)\n\nFunción especial que permite modificar las propiedades internas de los componentes\nCaracterísticas avanzadas\nModificación del life-cycle\nNormalmente forma use____" }, - { - "objectID": "pages/Bloque3/ps.html#importante", - "href": "pages/Bloque3/ps.html#importante", - "title": "Proyecto Subsistema", - "section": "Importante", - "text": "Importante\n\nLa solución mínima funcional es sencilla.\nSe espera que el alumnado mejore notablemente el aspecto visual usando CSS.\nEl diseño, la usabilidad y la presentación formarán parte de la evaluación.\nAquellos que completen la funcionalidad básica de la tarea podrán preguntarle al profesor como mejorar la tarea o que agregar para ampliar funcionalidades", - "crumbs": [ - "Bloque III Interacción", - "Semana 7", - "Proyecto Subsistema" - ] + { + "objectID": "pages/Bloque3/intermedio.html#useeffect", + "href": "pages/Bloque3/intermedio.html#useeffect", + "title": "React III", + "section": "useEffect", + "text": "useEffect\n\nuseEffect es un Hook que permite ejecutar efectos secundarios dentro de un componente funcional.\nUn efecto secundario es cualquier operación que no sea simplemente devolver JSX (por ejemplo: peticiones a un servidor, temporizadores, suscripciones).\nSe ejecuta después de que el componente se renderiza en el DOM." }, { - "objectID": "pages/Bloque3/ps.html#no-es-necesario", - "href": "pages/Bloque3/ps.html#no-es-necesario", - "title": "Proyecto Subsistema", - "section": "No es necesario", - "text": "No es necesario\n\nGuardar las tareas al recargar la página.\nAutenticación de usuarios.\nBase de datos o backend.", - "crumbs": [ - "Bloque III Interacción", - "Semana 7", - "Proyecto Subsistema" - ] + "objectID": "pages/Bloque3/intermedio.html#fetch", + "href": "pages/Bloque3/intermedio.html#fetch", + "title": "React III", + "section": "fetch()", + "text": "fetch()\nHasta ahora nuestros componentes eran completamente locales.\nSin embargo, en aplicaciones reales necesitamos:\n\nDescargar datos\n\nConectarnos a servidores\n\nTrabajar con APIs externas\n\nPara ello utilizamos fetch()." }, { - "objectID": "pages/Bloque3/ps.html#entregable", - "href": "pages/Bloque3/ps.html#entregable", - "title": "Proyecto Subsistema", - "section": "Entregable", - "text": "Entregable\n\nArchivos index.html, script.js y style.css.\nEl proyecto debe poder abrirse directamente en el navegador.", - "crumbs": [ - "Bloque III Interacción", - "Semana 7", - "Proyecto Subsistema" - ] + "objectID": "pages/Bloque3/intermedio.html#async-y-await", + "href": "pages/Bloque3/intermedio.html#async-y-await", + "title": "React III", + "section": "async y await", + "text": "async y await\nHasta ahora hemos utilizado fetch() con encadenamiento.\nExiste una forma más clara y estructurada de escribir código asíncrono:\n\nasync\nawait\n\nSu objetivo es hacer que el código sea más legible." }, { - "objectID": "pages/Bloque3/t6.html", - "href": "pages/Bloque3/t6.html", - "title": "T6: Romancero Gitano I", - "section": "", - "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado", - "crumbs": [ - "Bloque III Interacción", - "Semana 6", - "T6: Romancero Gitano I" - ] + "objectID": "pages/Bloque3/intermedio.html#ejemplo-con-la-pokeapi", + "href": "pages/Bloque3/intermedio.html#ejemplo-con-la-pokeapi", + "title": "React III", + "section": "Ejemplo con la Pokeapi", + "text": "Ejemplo con la Pokeapi\nPoke-API\nDownload Code" }, { - "objectID": "pages/Bloque3/t6.html#objetivo-de-la-tarea", - "href": "pages/Bloque3/t6.html#objetivo-de-la-tarea", - "title": "T6: Romancero Gitano I", + "objectID": "pages/Bloque3/Intermedio.html", + "href": "pages/Bloque3/Intermedio.html", + "title": "React III", "section": "", - "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado", + "text": "Contenido", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "T6: Romancero Gitano I" + "Semana 9", + "React III" ] }, { - "objectID": "pages/Bloque3/t6.html#estructura-html", - "href": "pages/Bloque3/t6.html#estructura-html", - "title": "T6: Romancero Gitano I", - "section": "Estructura HTML", - "text": "Estructura HTML\nEl documento HTML debe:\n\nEstar correctamente estructurado (<!DOCTYPE>, <html>, <head>, <body>).\nContener un contenedor principal centrado horizontalmente.\nIncluir, en este orden:\n\nUn elemento para mostrar información métrica del poema (número de estrofas y versos).\nUn elemento para el título del poema.\nUn elemento para el texto del poema, respetando los saltos de verso utilizando la etiqueta <pre>.\nUn botón que permita cambiar de poema.\n\n\nNo debe utilizarse ningún framework ni librería externa.", + "objectID": "pages/Bloque3/Intermedio.html#controlled-inputs", + "href": "pages/Bloque3/Intermedio.html#controlled-inputs", + "title": "React III", + "section": "Controlled Inputs", + "text": "Controlled Inputs\n\nMotivación\nHasta ahora se ha trabajado con eventos capturando acciones del usuario.\nSin embargo, al trabajar con formularios surge una cuestión fundamental:\n\n¿Quién controla el valor del input?\n¿El DOM o React?\n\nRecordemos que en HTML puro o, el valor de un <input> está gestionado directamente por el DOM.\nEn React, podemos hacer que el valor del input esté controlado por el estado del componente.\nA esto lo llamamos controlled input.\n\n\n¿Qué es un controlled input?\nUn controlled input es un elemento de formulario cuyo valor:\n\nEstá almacenado en el estado del componente\nSe actualiza mediante un evento (onChange)\nSe renderiza utilizando ese mismo estado\n\nÚnica fuente de verdad (single source of truth).\n\n\nEstructura del componente controlled\nimport { useState } from \"react\";\nfunction FormularioNombre() {\n\n const [nombre, setNombre] = useState(\"\");\n\n function manejarCambio(event) {\n setNombre(event.target.value);\n }\n\n return (\n <div>\n <input type=\"text\" \n value={nombre}\n onChange={manejarCambio}\n />\n <p>El nombre introducido es: {nombre}</p>\n </div>\n );\n}\n\nAnálisis del ejemplo\nEl valor del input se sincroniza con el estado\n\nDeclaramos una variable de estado: nombre\nAsociamos el atributo value del input a ese estado\nCapturamos el evento onChange\nActualizamos el estado con setNombre\n\nCada vez que el estado cambia: El componente se vuelve a ejecutar El JSX se vuelve a generar El valor del input se sincroniza con el estado\n\n\n\nEjemplo Formulario\nimport { useState } from \"react\";\n\nfunction FormularioSimple() {\n\n const [email, setEmail] = useState(\"\");\n\n function handleChange(event) {\n setEmail(event.target.value);\n }\n\n function handleSubmit(event) {\n event.preventDefault(); // Evita la recarga del navegador\n\n console.log(\"Formulario enviado\");\n console.log(\"Email:\", email);\n\n setEmail(\"\"); // Limpieza opcional del campo\n }\n\n return (\n <form onSubmit={handleSubmit}>\n <input \n type=\"email\"\n value={email}\n onChange={handleChange}\n />\n <button type=\"submit\">Enviar</button>\n </form>\n );\n}\nReferencia: https://es.react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "T6: Romancero Gitano I" + "Semana 9", + "React III" ] }, { - "objectID": "pages/Bloque3/t6.html#javascript", - "href": "pages/Bloque3/t6.html#javascript", - "title": "T6: Romancero Gitano I", - "section": "JavaScript", - "text": "JavaScript\n\nDatos\nEn JavaScript se debe definir un array de objetos, donde cada objeto represente un poema y tenga al menos:\n\nUn título.\nEl texto del poema como una cadena de texto, usando saltos de línea para los versos.\n\nEl cambio de poema debe hacerse recorriendo este array de forma cíclica (cola circular) mediante el botón.\nDescargar poemas (click derecho guardar enlace como)\n\n\nManipulación del DOM\nEl comportamiento de la página debe implementarse exclusivamente con DOM nativo, cumpliendo lo siguiente:\n\nTodas las funciones deben declararse como arrow functions.\nAl pulsar el botón:\n\nSe actualiza el título.\nSe actualiza el texto del poema.\nSe modifica el formato del fondo.\nSe recalculan y muestran:\n\nNúmero de versos.\nNúmero de estrofas (bloques separados por líneas en blanco).\n\n\n\nEl cálculo debe realizarse a partir del texto del poema, no con valores predefinidos.", + "objectID": "pages/Bloque3/Intermedio.html#hooks-repaso", + "href": "pages/Bloque3/Intermedio.html#hooks-repaso", + "title": "React III", + "section": "Hooks (Repaso)", + "text": "Hooks (Repaso)\n\nFunción especial que permite modificar las propiedades internas de los componentes\nCaracterísticas avanzadas\nModificación del life-cycle\nNormalmente forma use____", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "T6: Romancero Gitano I" + "Semana 9", + "React III" ] }, { - "objectID": "pages/Bloque3/t6.html#css", - "href": "pages/Bloque3/t6.html#css", - "title": "T6: Romancero Gitano I", - "section": "CSS", - "text": "CSS\nLorca utiliza las metáforas y la alegoría como elemento principal sobre el que construye sus poemas, al analizar profundamente descubrimos que siempre recurre a las mismas metáforas.\nEl color no se utiliza aquí solo como elemento decorativo, sino como un recurso semántico: cada color representa un símbolo literario presente en el poema.\nDesde el punto de vista técnico: - Los colores de fondo y de texto deben definirse en clases CSS. - JavaScript no decide colores, únicamente decide qué clase aplicar según el contenido del poema.\n\nPalabras clave y colores asociados\nSe debe detectar el texto del poema las siguientes palabras clave y aplicar el color de fondo correspondiente:\n\nguardia civil → fondo verde militar\nsangre → fondo granate oscuro\ncaballo → fondo color tierra\ncuchillo / navaja → fondo plateado\n\nEl color del texto debe elegirse siempre de forma que exista contraste suficiente con el fondo y se garantice la legibilidad.\nSi el poema contiene varias palabras clave, solo debe aplicarse un único estilo, siguiendo un orden de prioridad definido previamente.\nSi el poema no contiene ninguna de estas palabras, se aplicará un estilo por defecto con colores aleatorios.", + "objectID": "pages/Bloque3/Intermedio.html#useeffect", + "href": "pages/Bloque3/Intermedio.html#useeffect", + "title": "React III", + "section": "useEffect", + "text": "useEffect\n\nuseEffect es un Hook que permite ejecutar efectos secundarios dentro de un componente funcional.\nUn efecto secundario es cualquier operación que no sea simplemente devolver JSX (por ejemplo: peticiones a un servidor, temporizadores, suscripciones).\nSe ejecuta después de que el componente se renderiza en el DOM.\n\n\nMétodos de uso de useEffect\n\n1. Sin array de dependencias\nuseEffect(() => {\n console.log(\"Se ejecuta en cada render\");\n});\nComportamiento:\n\nSe ejecuta después de cada renderizado.\nNo existe control sobre la frecuencia.\nPuede generar bucles si modifica estado sin control.\n\nInterpretación conceptual:\nEl efecto acompaña siempre al render.\n\n\n2. Con array vacío\nuseEffect(() => {\n console.log(\"Se ejecuta solo una vez\");\n}, []);\nComportamiento:\n\nSe ejecuta únicamente tras el primer render.\nEquivalente conceptual al “montaje” del componente.\n\nUso habitual:\n\nPeticiones a servidor\nInicializaciones\nSuscripciones\n\nInterpretación conceptual:\nEl efecto ocurre una única vez al crear el componente.\n\n\n3. Con dependencias específicas\nuseEffect(() => {\n console.log(\"Se ejecuta cuando cambia contador\");\n}, [contador]);\nComportamiento:\n\nSe ejecuta tras el primer render.\nSe vuelve a ejecutar cuando cambia alguna variable del array.\n\nInterpretación conceptual:\nEl efecto depende del estado indicado.\nReact compara el valor anterior con el nuevo y decide si debe ejecutar el efecto.", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "T6: Romancero Gitano I" + "Semana 9", + "React III" ] }, { - "objectID": "pages/Bloque3/t6.html#extra-opcional-símbolo-aurora", - "href": "pages/Bloque3/t6.html#extra-opcional-símbolo-aurora", - "title": "T6: Romancero Gitano I", - "section": "Extra opcional: símbolo aurora 🌈", - "text": "Extra opcional: símbolo aurora 🌈\nDe forma voluntaria, se puede añadir el símbolo aurora, que tendrá prioridad absoluta sobre todos los demás.\nCuando el poema contenga la palabra aurora, el fondo debe mostrar un degradado animado.\n\nCSS necesario para el extra\n.aurora {\n background: linear-gradient(120deg,\n #ff005d,\n #ff9f1c,\n #ffee32,\n #3cff00,\n #00e5ff,\n #7a00ff,\n #ff00c8\n );\n background-size: 600% 600%;\n animation: aurora 10s linear infinite;\n color: black;\n}\n\n@keyframes aurora {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}", + "objectID": "pages/Bloque3/Intermedio.html#fetch", + "href": "pages/Bloque3/Intermedio.html#fetch", + "title": "React III", + "section": "fetch()", + "text": "fetch()\nHasta ahora nuestros componentes eran completamente locales.\nSin embargo, en aplicaciones reales necesitamos:\n\nDescargar datos\n\nConectarnos a servidores\n\nTrabajar con APIs externas\n\nPara ello utilizamos fetch().\n\nEjemplo mínimo de fetch\nfetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n .then(response => response.json())\n .then(data => console.log(data));\nUtiliza las Promises\nInterpretación simple:\n\nSe hace una petición a una URL\n\nSe transforma la respuesta a formato JSON\n\nSe accede a los datos\n\n\n\nfetch() dentro de useEffect\nEn React, lo habitual es realizar la descarga cuando el componente se monta.\nPara ello:\n\nUtilizamos useEffect\nAñadimos array vacío []\nGuardamos los datos en el estado\n\n\n\nEjemplo integrado\nimport { useState, useEffect } from \"react\";\n\nfunction Pokemon() {\n\n const [pokemon, setPokemon] = useState(null);\n\n useEffect(() => {\n\n fetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n .then(response => response.json())\n .then(data => setPokemon(data));\n\n }, []);\n\n if (!pokemon) return <p>Cargando...</p>;\n\n return (\n <div>\n <h2>{pokemon.name}</h2>\n <img \n src={pokemon.sprites.front_default} \n alt={pokemon.name} \n />\n </div>\n );\n}\n\n\nFlujo conceptual\n\nRender inicial\n\nSe ejecuta useEffect\n\nSe lanza la petición\n\nSe actualiza el estado\n\nNuevo render con los datos\n\n\n\nAdvertencia importante\nSi eliminamos el array vacío:\nuseEffect(() => {\n fetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n .then(res => res.json())\n .then(data => setPokemon(data));\n});\nEl efecto se ejecutará en cada render.\nComo actualizar estado provoca render, se generará un bucle infinito.\nuseEffect conecta React con el exterior.\nfetch() permite traer datos del exterior.\nEl estado vuelve a controlar el render.\nEn la siguiente sección formalizaremos esto utilizando async / await.", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "T6: Romancero Gitano I" + "Semana 9", + "React III" ] }, { - "objectID": "pages/Bloque3/t6.html#consejos", - "href": "pages/Bloque3/t6.html#consejos", - "title": "T6: Romancero Gitano I", - "section": "Consejos", - "text": "Consejos\n\nCentrado de la página (layout clásico)\nToda la página debe estar centrada horizontalmente.\nEl centrado se consigue mediante:\n\nUn contenedor con un ancho máximo definido.\nMárgenes automáticos a izquierda y derecha.\n\nDesde el punto de vista conceptual:\n\nmargin: 0 auto no centra texto, centra bloques.\nEl navegador reparte automáticamente el espacio sobrante a ambos lados del contenedor.\n\n\n\nAnimación del cambio de color\nPara evitar que los cambios de color sean bruscos, se utiliza la propiedad transition en CSS.\nEsta propiedad indica al navegador que los cambios en determinadas propiedades visuales deben hacerse de forma progresiva.\nEjemplo conceptual:\nbody {\n transition: background-color 0.6s, color 0.6s;\n}\nGracias a esta transición: - Cuando JavaScript cambia una clase o un color, - el navegador interpola automáticamente entre el color anterior y el nuevo.\nNo es necesario programar animaciones en JavaScript: CSS se encarga de todo el efecto visual.\n\n\nBúsqueda de una palabra\nPara buscar si determinada palabra determinada se debe utilizar la función includes de la clase string\n\ntexto = \"hoy nieva\";\n\ntexto.includes(\"nieva\"); //TRUE\ntexto.includes(\"llueve\"); //FALSE\n\n\nGeneración del color aleatorio\nPara la generacióndel color aleatorio de puede utilizar la siguiente función\nconst randomColor = () => '#' + Math.floor(Math.random() * 16777215).toString(16);\n\n\nConteo versos y estrofas\nEl recuento de versos y estrofas debe hacerse a partir del texto del poema, no con valores escritos a mano. A continuación se dan algunas pistas técnicas para abordar este problema.\n\nConteo de versos\nUn verso puede considerarse, a efectos prácticos en esta tarea, como una línea de texto no vacía.\nUna estrategia habitual consiste en: - Separar el texto por saltos de línea. - Eliminar las líneas vacías o formadas solo por espacios. - Contar cuántas líneas válidas quedan.\nEjemplo orientativo:\nconst versos = texto\n .split('\\n')\n .filter(linea => linea.trim() !== '')\n .length;\nEste enfoque es suficiente para la mayoría de los poemas del Romancero gitano y evita errores frecuentes.\n\n\nConteo de estrofas\nUna estrofa puede entenderse como un bloque de versos separado de otros bloques por una línea en blanco.\nUna posible estrategia es: - Separar el texto usando dos (o más) saltos de línea consecutivos. - Eliminar bloques vacíos. - Contar los bloques resultantes.\nEjemplo orientativo:\nconst estrofas = texto\n .split(/\\n\\s*\\n/)\n .filter(bloque => bloque.trim() !== '')\n .length;\nEntrega: un único archivo HTML funcional.", + "objectID": "pages/Bloque3/Intermedio.html#async-y-await", + "href": "pages/Bloque3/Intermedio.html#async-y-await", + "title": "React III", + "section": "async y await", + "text": "async y await\nHasta ahora hemos utilizado fetch() con encadenamiento.\nExiste una forma más clara y estructurada de escribir código asíncrono:\n\nasync\nawait\n\nSu objetivo es hacer que el código sea más legible.\n\n¿Qué significa async?\n\nSe coloca delante de una función\nIndica que la función trabajará con operaciones asíncronas\n\nasync function ejemplo() {\n console.log(\"Función asíncrona\");\n}\n\n\n¿Qué significa await?\n\nSolo puede utilizarse dentro de una función async\nDetiene la ejecución hasta que la operación finaliza\nHace que el código se lea de forma secuencial\n\n\n\nEjemplo básico con fetch\nasync function obtenerPokemon() {\n\n const response = await fetch(\n \"https://pokeapi.co/api/v2/pokemon/1\"\n );\n\n const data = await response.json();\n\n console.log(data);\n}\nInterpretación conceptual:\n\nSe realiza la petición\nSe espera la respuesta\nSe transforma a JSON\nSe trabaja con los datos\n\nEl código se lee de arriba hacia abajo.\n\n\nasync / await dentro de useEffect\nEn React, lo habitual es declarar una función interna y ejecutarla.\n\n\nEjemplo completo\nimport { useState, useEffect } from \"react\";\n\nfunction Pokemon() {\n\n const [pokemon, setPokemon] = useState(null);\n\n useEffect(() => {\n\n async function fetchData() {\n\n const response = await fetch(\n \"https://pokeapi.co/api/v2/pokemon/1\"\n );\n\n const data = await response.json();\n\n setPokemon(data);\n }\n\n fetchData();\n\n }, []);\n\n if (!pokemon) return <p>Cargando...</p>;\n\n return (\n <div>\n <h2>{pokemon.name}</h2>\n <img \n src={pokemon.sprites.front_default} \n alt={pokemon.name} \n />\n </div>\n );\n}\n\n\n¿Por qué no hacer directamente?\nuseEffect(async () => {\n ...\n}, []);\nPorque useEffect no debe recibir una función asíncrona directamente.\nPor eso declaramos la función dentro y luego la ejecutamos.\n\n\nFlujo mental con async / await\n\nRender inicial\n\nSe ejecuta useEffect\n\nSe llama a la función asíncrona\n\nawait espera la respuesta\n\nSe actualiza el estado\n\nNuevo render\n\nasync / await no cambia lo que hace el programa.\nSolo cambia la forma de escribirlo:\nMás claro.\nMás estructurado.\nMás fácil de mantener.", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "T6: Romancero Gitano I" + "Semana 9", + "React III" ] }, { - "objectID": "pages/Bloque3/t6.html#recomendaciones-para-afrontar-la-tarea", - "href": "pages/Bloque3/t6.html#recomendaciones-para-afrontar-la-tarea", - "title": "T6: Romancero Gitano I", - "section": "Recomendaciones para afrontar la tarea", - "text": "Recomendaciones para afrontar la tarea\nAl enfrentarnos a un proyecto de cierta complejitud, el como afrontarlo resulta de cricial para el desarollo del mismo por ello a a continuación dejo un esquema de implementación modular. Sería mejor no utilizarlo, pero puede ser un buen punto de partida si no se sabe como empezar la app, no es el único proceso de implementación válido ni es más correcto que cualquier otro\n\nEstructura de HTML básica contadores de versos y estrofas placeholders de poema y título y botón\nFormateo CSS parte estática: centrado, tamaño (todo lo que no sea color)\nDefinir clases con colores predeterminados\nLógica interna con JS\n\n\nBuscar palabra\nContar estrofas\nConteo versos\nSelección de clase\nGenerar color aleatorio si procede\n\n\nIntegración con DOM", + "objectID": "pages/Bloque3/Intermedio.html#ejemplo-con-la-pokeapi", + "href": "pages/Bloque3/Intermedio.html#ejemplo-con-la-pokeapi", + "title": "React III", + "section": "Ejemplo con la Pokeapi", + "text": "Ejemplo con la Pokeapi\nPoke-API\nDownload Code", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "T6: Romancero Gitano I" + "Semana 9", + "React III" ] }, { - "objectID": "pages/Bloque3/MARef.html", - "href": "pages/Bloque3/MARef.html", - "title": "MA: Uncontrolled fields y useRef", + "objectID": "pages/Bloque3/MAentorno.html", + "href": "pages/Bloque3/MAentorno.html", + "title": "MA: Entorno", "section": "", - "text": "Por el momento hemos visto dos hooks useState y useEffect, pero recordemos que en React existen más tipos de hooks que por ser menos útiles y debido a la falta de tiempo no son explicados, no obstante si hay alguno digno de mención es useRef o las referencias.\nUna ref es una referencia mutable que permite acceder directamente a un elemento del DOM o almacenar un valor persistente sin provocar un re-render del componente. El siguiente video ilustra su uso. Es un poco largo pero sirve para repasar los otros hooks.\n\n\nCon las ref podemos introducir los uncontrolled fields que nos permiten trabajar de otra forma con los formularios.\n\nSe prefiere la segunda implementación (la que no utiliza referencias) sobre la primera.", -<<<<<<< HEAD - "crumbs": [ - "Bloque III Interacción", - "Semana 9", - "MA: *Uncontrolled fields* y `useRef`" - ] + "text": "Tanto trabajando con React como con JavaScript puede ser útil leer propiedades del navegador, así como almacenar información en los dispositivos locales." }, { - "objectID": "pages/Bloque3/dom.html#qué-es-el-dom", - "href": "pages/Bloque3/dom.html#qué-es-el-dom", - "title": "DOM", - "section": "¿Qué es el DOM?", - "text": "¿Qué es el DOM?\nEl DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador." + "objectID": "pages/Bloque3/presentacion-reactIV.html#ecosistema-node", + "href": "pages/Bloque3/presentacion-reactIV.html#ecosistema-node", + "title": "React IV", + "section": "Ecosistema Node", + "text": "Ecosistema Node\nHasta ahora hemos trabajado únicamente con React y JavaScript.\nSin embargo, en el desarrollo real de aplicaciones es muy común utilizar librerías externas, para ello podemos recurrir Node.JS.\nReact está diseñado para funcionar dentro de un ecosistema de paquetes." }, { - "objectID": "pages/Bloque3/dom.html#el-dom-como-árbol", - "href": "pages/Bloque3/dom.html#el-dom-como-árbol", - "title": "DOM", - "section": "El DOM como árbol", - "text": "El DOM como árbol\nEl DOM tiene estructura de árbol (grafo):\n\nCada etiqueta HTML es un nodo\nLos nodos tienen relaciones (padre, hijos, hermanos)\n\nEjemplo:\n<body>\n <h1>Título</h1>\n <button>Click</button>\n</body>" + "objectID": "pages/Bloque3/presentacion-reactIV.html#npm", + "href": "pages/Bloque3/presentacion-reactIV.html#npm", + "title": "React IV", + "section": "npm", + "text": "npm\nnpm (Node Package Manager) es el sistema que permite instalar y gestionar librerías de JavaScript. Como su nombre indica, está desarrollado por Node.JS\nCada proyecto tiene un archivo:\npackage.json\nEn este archivo se registran las dependencias del proyecto." }, { - "objectID": "pages/Bloque3/dom.html#acceso-al-dom-desde-javascript", - "href": "pages/Bloque3/dom.html#acceso-al-dom-desde-javascript", - "title": "DOM", - "section": "Acceso al DOM desde JavaScript", - "text": "Acceso al DOM desde JavaScript\nEl navegador nos proporciona el objeto global document, que permite:\n\nBuscar elementos\nLeer su contenido\nModificar la interfaz\n\ndocument\ndocument.body" + "objectID": "pages/Bloque3/presentacion-reactIV.html#react-router", + "href": "pages/Bloque3/presentacion-reactIV.html#react-router", + "title": "React IV", + "section": "React Router", + "text": "React Router\nEn una aplicación web tradicional cada enlace carga una página nueva.\nEn React normalmente trabajamos con Single Page Applications (SPA).\nEn una SPA:\n\nel navegador no recarga la página\nReact cambia los componentes que se muestran\n\nPara gestionar esto utilizamos React Router.\nRealmente es la misma página, solo que el usuario lo percibe como distintas páginas" }, { - "objectID": "pages/Bloque3/dom.html#selectores", - "href": "pages/Bloque3/dom.html#selectores", - "title": "DOM", - "section": "Selectores", - "text": "Selectores\nPor ID\ndocument.getElementById(\"count\")\ndocument.querySelector(\"#count\")\nPor etiqueta\ndocument.querySelector(\"button\")" + "objectID": "pages/Bloque3/presentacion-reactIV.html#context-api", + "href": "pages/Bloque3/presentacion-reactIV.html#context-api", + "title": "React IV", + "section": "Context API", + "text": "Context API\nEn aplicaciones grandes aparece un problema frecuente.\nMuchos componentes necesitan acceder a la misma información.\nPor ejemplo:\n\nusuario\ntema visual\nidioma\nconfiguración\n\nSi pasamos la información mediante props, los datos deben atravesar muchos componentes." }, { - "objectID": "pages/Bloque3/dom.html#leer-y-modificar-elementos", - "href": "pages/Bloque3/dom.html#leer-y-modificar-elementos", - "title": "DOM", - "section": "Leer y modificar elementos", - "text": "Leer y modificar elementos\nelement.textContent\nelement.textContent = \"Nuevo texto\"\nelement.classList.add(\"active\")\nelement.classList.remove(\"active\")" + "objectID": "pages/Bloque3/ReactIV.html", + "href": "pages/Bloque3/ReactIV.html", + "title": "React IV", + "section": "", + "text": "Contenido", + "crumbs": [ + "Bloque III Interacción", + "Semana 10", + "React IV" + ] }, { - "objectID": "pages/Bloque3/dom.html#eventos", - "href": "pages/Bloque3/dom.html#eventos", - "title": "DOM", - "section": "Eventos", - "text": "Eventos\nEl DOM permite reaccionar a acciones del usuario mediante eventos.\nbutton.addEventListener(\"click\", () => {\n // código a ejecutar\n});\nFlujo típico:\nUsuario → Evento → JavaScript → DOM actualizado" + "objectID": "pages/Bloque3/ReactIV.html#ecosistema-node", + "href": "pages/Bloque3/ReactIV.html#ecosistema-node", + "title": "React IV", + "section": "Ecosistema Node", + "text": "Ecosistema Node\nHasta ahora hemos trabajado únicamente con React y JavaScript.\nSin embargo, en el desarrollo real de aplicaciones es muy común utilizar librerías externas, para ello podemos recurrir Node.JS.\nReact está diseñado para funcionar dentro de un ecosistema de paquetes.\nEjemplos habituales:\n\nReact Router → navegación\nAxios → peticiones HTTP\nChart.js → gráficas\nZustand / Redux → gestión de estado\nLibrerías de UI: Tailwind, Bootstrap, Booswatch", + "crumbs": [ + "Bloque III Interacción", + "Semana 10", + "React IV" + ] }, { - "objectID": "pages/Bloque3/dom.html#ejemplo-contador-con-botón", - "href": "pages/Bloque3/dom.html#ejemplo-contador-con-botón", - "title": "DOM", - "section": "Ejemplo: contador con botón", - "text": "Ejemplo: contador con botón\nHTML\n<h1 id=\"count\">0</h1>\n<button id=\"btn\">Sumar 1</button>\nJavaScript\nlet count = 0;\n\nconst countEl = document.querySelector(\"#count\");\nconst btn = document.querySelector(\"#btn\");\n\nbtn.addEventListener(\"click\", () => {\n count++;\n countEl.textContent = count;\n});" + "objectID": "pages/Bloque3/ReactIV.html#npm", + "href": "pages/Bloque3/ReactIV.html#npm", + "title": "React IV", + "section": "npm", + "text": "npm\nnpm (Node Package Manager) es el sistema que permite instalar y gestionar librerías de JavaScript. Como su nombre indica, está desarrollado por Node.JS\nCada proyecto tiene un archivo:\npackage.json\nEn este archivo se registran las dependencias del proyecto.\nEjemplo:\n{\n \"dependencies\": {\n \"react\": \"^18.0.0\",\n \"react-router-dom\": \"^6.0.0\"\n }\n}\n\nInstalación de paquetes\nLas librerías se instalan desde la terminal.\nnpm install react-router-dom\nEsto hace tres cosas:\n\nDescarga el paquete\nLo guarda en node_modules (capreta donde se guardan las librerías externas)\nAñade la dependencia en package.json", + "crumbs": [ + "Bloque III Interacción", + "Semana 10", + "React IV" + ] + }, + { + "objectID": "pages/Bloque3/ReactIV.html#react-router", + "href": "pages/Bloque3/ReactIV.html#react-router", + "title": "React IV", + "section": "React Router", + "text": "React Router\nEn una aplicación web tradicional cada enlace carga una página nueva.\nEn React normalmente trabajamos con Single Page Applications (SPA).\nEn una SPA:\n\nel navegador no recarga la página\nReact cambia los componentes que se muestran\n\nPara gestionar esto utilizamos React Router.\nRealmente es la misma página, solo que el usuario lo percibe como distintas páginas\nEl usuario percibirá que el sitio web está divido en diferentes subpáginas\n\n/\npokemons\npokemons/pikachu\n\n\nComponentes principales de React Router\nLos elementos fundamentales son:\n\nBrowserRouter\nRoutes\nRoute\nLink\n\nEjemplo básico:\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\n\nfunction App() {\n return (\n <BrowserRouter>\n\n <Routes>\n\n <Route path=\"/\" element={<Home />} />\n\n <Route path=\"/pokemons\" element={<PokemonList />} />\n\n </Routes>\n\n </BrowserRouter>\n );\n}\nElementos del código\n\nBrowserRouter\nEs el componente que activa el sistema de navegación de React Router. Utiliza la API de historial del navegador para cambiar la URL sin recargar la página.\nRoutes\nEs el contenedor donde se definen todas las rutas de la aplicación. React Router examina las rutas dentro de este componente para decidir qué componente mostrar.\nRoute\nDefine una ruta concreta de la aplicación.\n\n\npath\nIndica la URL que activa la ruta.\nEjemplo: / corresponde a la página principal.\nelement\nEs el componente de React que se renderiza cuando la URL coincide con el path.\n<Home />\nComponente que se muestra cuando el usuario accede a la ruta /.\n<PokemonList />\nComponente que se muestra cuando el usuario accede a la ruta /pokemons.\n\n\n\nNavegación\nPara navegar entre páginas utilizamos el componente Link.\nimport { Link } from \"react-router-dom\";\n\n<Link to=\"/\">Inicio</Link>\n\n<Link to=\"/pokemon\">Pokemon</Link>\nA diferencia de <a>:\n\nno recarga la página\nReact cambia el componente visible\n\n\n\nParámetros dinámicos\nPodemos crear rutas dinámicas.\nEjemplo:\n/pokemon/25\n/pokemon/7\nDefinición de la ruta:\n<Route path=\"/pokemon/:id\" element={<PokemonDetail />} />\n\nuseParams\nPara acceder al parámetro utilizamos el hook useParams de React Router.\nimport { useParams } from \"react-router-dom\";\n\nfunction PokemonDetail() {\n\n const { id } = useParams();\n\n return <p>Pokemon {id}</p>;\n\n}\nEste parámetro puede utilizarse para realizar peticiones a una API.", + "crumbs": [ + "Bloque III Interacción", + "Semana 10", + "React IV" + ] }, { - "objectID": "pages/Bloque3/dom.html#más-ejemplos", - "href": "pages/Bloque3/dom.html#más-ejemplos", - "title": "DOM", - "section": "Más ejemplos", - "text": "Más ejemplos\nEj1: Show input\nEj2: Par e Impar\nEj3: Toggle\nEj4: Creación dinámica\nEj5: Validación básica" + "objectID": "pages/Bloque3/ReactIV.html#context-api", + "href": "pages/Bloque3/ReactIV.html#context-api", + "title": "React IV", + "section": "Context API", + "text": "Context API\nEn aplicaciones grandes aparece un problema frecuente.\nMuchos componentes necesitan acceder a la misma información.\nPor ejemplo:\n\nusuario\ntema visual\nidioma\nconfiguración\n\nSi pasamos la información mediante props, los datos deben atravesar muchos componentes.\nRepresentación conceptual:\nApp\n └ Layout\n └ Page\n └ Component\nSi todos necesitan user, debemos pasar la prop continuamente.\nEste problema se conoce como prop drilling.\n\nContext\nReact proporciona una solución llamada Context.\nContext permite compartir información entre múltiples componentes sin pasar props manualmente.\nEl proceso tiene tres pasos:\n\nCrear el contexto\nProveer el contexto\nConsumir el contexto\n\n\nCrear un contexto\nimport { createContext } from \"react\";\n\nconst UserContext = createContext();\nEsto crea un contenedor que puede almacenar información compartida.\n\n\nProvider\nEl Provider permite que los componentes hijos accedan al contexto.\n<UserContext.Provider value={user}>\n\n <App />\n\n</UserContext.Provider>\nTodos los componentes dentro del Provider pueden acceder al valor.\n\n\nConsumir el contexto\nPara acceder al contexto utilizamos el hook useContext.\nimport { useContext } from \"react\";\n\nconst user = useContext(UserContext);\nEl componente obtiene directamente el valor almacenado en el contexto.\n\n\nEjemplo completo\nimport { createContext, useContext } from \"react\";\n\nconst UserContext = createContext();\n\nfunction App() {\n\n const user = { name: \"Javier\" };\n\n return (\n\n <UserContext.Provider value={user}>\n\n <Profile />\n\n </UserContext.Provider>\n\n );\n}\n\nfunction Profile() {\n\n const user = useContext(UserContext);\n\n return <h1>{user.name}</h1>;\n\n}", + "crumbs": [ + "Bloque III Interacción", + "Semana 10", + "React IV" + ] }, { - "objectID": "pages/Bloque3/DOM.html", - "href": "pages/Bloque3/DOM.html", - "title": "DOM", + "objectID": "pages/Bloque3/MAcss2.html", + "href": "pages/Bloque3/MAcss2.html", + "title": "MA: CSS Flex y CSS", "section": "", - "text": "El DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador.", + "text": "Además de las propiedades estudiadas de CSS también hay algunas críticas que debido a la falta de tiempo no se han podido explicar como es el caso de display a continuación estos dos vídeos profundizan en los modos flex y grid formas diferentes de diseñar la estructura de la página", "crumbs": [ "Bloque III Interacción", "Semana 6", - "DOM" + "MA: CSS Flex y CSS" ] }, { - "objectID": "pages/Bloque3/DOM.html#qué-es-el-dom", - "href": "pages/Bloque3/DOM.html#qué-es-el-dom", - "title": "DOM", + "objectID": "pages/Bloque3/t10.html", + "href": "pages/Bloque3/t10.html", + "title": "T10: Quiz app!", "section": "", - "text": "El DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador.", + "text": "Desarrollar una aplicación React que permita al usuario realizar un quiz de cultura general utilizando preguntas obtenidas desde una API pública.\nhttps://astonishing-douhua-44213e.netlify.app/\nLa aplicación debe mostrar preguntas, permitir seleccionar respuestas y calcular la puntuación final.", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "DOM" + "Semana 10", + "T10: Quiz app!" ] }, { - "objectID": "pages/Bloque3/DOM.html#el-dom-como-árbol", - "href": "pages/Bloque3/DOM.html#el-dom-como-árbol", - "title": "DOM", - "section": "El DOM como árbol", - "text": "El DOM como árbol\nEl DOM tiene estructura de árbol (grafo):\n\nCada etiqueta HTML es un nodo\nLos nodos tienen relaciones (padre, hijos, hermanos)\n\nEjemplo:\n<body>\n <h1>Título</h1>\n <button>Click</button>\n</body>\nRepresentación conceptual:\ndocument\n └─ body\n ├─ h1\n └─ button", + "objectID": "pages/Bloque3/t10.html#objetivo", + "href": "pages/Bloque3/t10.html#objetivo", + "title": "T10: Quiz app!", + "section": "", + "text": "Desarrollar una aplicación React que permita al usuario realizar un quiz de cultura general utilizando preguntas obtenidas desde una API pública.\nhttps://astonishing-douhua-44213e.netlify.app/\nLa aplicación debe mostrar preguntas, permitir seleccionar respuestas y calcular la puntuación final.", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "DOM" + "Semana 10", + "T10: Quiz app!" ] }, { - "objectID": "pages/Bloque3/DOM.html#acceso-al-dom-desde-javascript", - "href": "pages/Bloque3/DOM.html#acceso-al-dom-desde-javascript", - "title": "DOM", - "section": "Acceso al DOM desde JavaScript", - "text": "Acceso al DOM desde JavaScript\nEl navegador nos proporciona el objeto global document, que permite:\n\nBuscar elementos\nLeer su contenido\nModificar la interfaz\n\ndocument\ndocument.body", + "objectID": "pages/Bloque3/t10.html#cargar-preguntas-desde-la-api", + "href": "pages/Bloque3/t10.html#cargar-preguntas-desde-la-api", + "title": "T10: Quiz app!", + "section": "1. Cargar preguntas desde la API", + "text": "1. Cargar preguntas desde la API\nCuando la aplicación se inicia debe obtener 10 preguntas desde la API.\nPara ello se debe usar:\n\nfetch\nuseEffect\n\nMientras se cargan los datos se debe mostrar:\nLoading...", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "DOM" + "Semana 10", + "T10: Quiz app!" ] }, { - "objectID": "pages/Bloque3/DOM.html#selectores", - "href": "pages/Bloque3/DOM.html#selectores", - "title": "DOM", - "section": "Selectores", - "text": "Selectores\n\nPor ID\ndocument.getElementById(\"count\")\ndocument.querySelector(\"#count\")\n\n\nPor etiqueta\ndocument.querySelector(\"button\")\n\n\nPor clase\ndocument.querySelector(\".item\")\ndocument.querySelectorAll(\".item\")\nNotas: - querySelector devuelve el primer elemento - querySelectorAll devuelve una lista - Usan la misma sintaxis que CSS", + "objectID": "pages/Bloque3/t10.html#mostrar-la-pregunta-actual", + "href": "pages/Bloque3/t10.html#mostrar-la-pregunta-actual", + "title": "T10: Quiz app!", + "section": "2. Mostrar la pregunta actual", + "text": "2. Mostrar la pregunta actual\nLa aplicación debe mostrar:\n\nnúmero de pregunta\ntexto de la pregunta\n\nEjemplo:\nQuestion 3\nWhat is the capital of France?", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "DOM" + "Semana 10", + "T10: Quiz app!" ] }, { - "objectID": "pages/Bloque3/DOM.html#leer-y-modificar-elementos", - "href": "pages/Bloque3/DOM.html#leer-y-modificar-elementos", - "title": "DOM", - "section": "Leer y modificar elementos", - "text": "Leer y modificar elementos\nelement.textContent\nelement.textContent = \"Nuevo texto\"\nelement.classList.add(\"active\")\nelement.classList.remove(\"active\")", + "objectID": "pages/Bloque3/t10.html#mostrar-las-posibles-respuestas", + "href": "pages/Bloque3/t10.html#mostrar-las-posibles-respuestas", + "title": "T10: Quiz app!", + "section": "3. Mostrar las posibles respuestas", + "text": "3. Mostrar las posibles respuestas\nCada pregunta tiene:\n\n1 respuesta correcta\n3 respuestas incorrectas\n\nSe deben mostrar las 4 respuestas como botones.\nEjemplo:\nParis\nRome\nMadrid\nBerlin", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "DOM" + "Semana 10", + "T10: Quiz app!" ] }, { - "objectID": "pages/Bloque3/DOM.html#eventos", - "href": "pages/Bloque3/DOM.html#eventos", - "title": "DOM", - "section": "Eventos", - "text": "Eventos\nEl DOM permite reaccionar a acciones del usuario mediante eventos.\nbutton.addEventListener(\"click\", () => {\n // código a ejecutar\n});\nFlujo típico:\nUsuario → Evento → JavaScript → DOM actualizado", + "objectID": "pages/Bloque3/t10.html#seleccionar-una-respuesta", + "href": "pages/Bloque3/t10.html#seleccionar-una-respuesta", + "title": "T10: Quiz app!", + "section": "4. Seleccionar una respuesta", + "text": "4. Seleccionar una respuesta\nCuando el usuario hace clic en una respuesta:\n\nla opción debe quedar marcada visualmente\nla selección debe guardarse en el estado del componente", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "DOM" + "Semana 10", + "T10: Quiz app!" ] }, { - "objectID": "pages/Bloque3/DOM.html#ejemplo-contador-con-botón", - "href": "pages/Bloque3/DOM.html#ejemplo-contador-con-botón", - "title": "DOM", - "section": "Ejemplo: contador con botón", - "text": "Ejemplo: contador con botón\n\nHTML\n<h1 id=\"count\">0</h1>\n<button id=\"btn\">Sumar 1</button>\n\n\nJavaScript\nlet count = 0;\n\nconst countEl = document.querySelector(\"#count\");\nconst btn = document.querySelector(\"#btn\");\n\nbtn.addEventListener(\"click\", () => {\n count++;\n countEl.textContent = count;\n});", + "objectID": "pages/Bloque3/t10.html#pasar-a-la-siguiente-pregunta", + "href": "pages/Bloque3/t10.html#pasar-a-la-siguiente-pregunta", + "title": "T10: Quiz app!", + "section": "5. Pasar a la siguiente pregunta", + "text": "5. Pasar a la siguiente pregunta\nDebe existir un botón:\nNext\nEste botón:\n\nsolo se puede pulsar cuando el usuario ha seleccionado una respuesta\npasa a la siguiente pregunta", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "DOM" + "Semana 10", + "T10: Quiz app!" ] }, { - "objectID": "pages/Bloque3/DOM.html#más-ejemplos", - "href": "pages/Bloque3/DOM.html#más-ejemplos", - "title": "DOM", - "section": "Más ejemplos", - "text": "Más ejemplos\nEj1: Show input\nEj2: Par e Impar\nEj3: Toggle\nEj4: Creación dinámica\nEj5: Validación básica", + "objectID": "pages/Bloque3/t10.html#calcular-la-puntuación", + "href": "pages/Bloque3/t10.html#calcular-la-puntuación", + "title": "T10: Quiz app!", + "section": "6. Calcular la puntuación", + "text": "6. Calcular la puntuación\nCuando el usuario responde una pregunta:\n\nsi la respuesta es correcta → sumar 1 punto", "crumbs": [ "Bloque III Interacción", - "Semana 6", - "DOM" -======= + "Semana 10", + "T10: Quiz app!" + ] + }, + { + "objectID": "pages/Bloque3/t10.html#mostrar-el-resultado-final", + "href": "pages/Bloque3/t10.html#mostrar-el-resultado-final", + "title": "T10: Quiz app!", + "section": "7. Mostrar el resultado final", + "text": "7. Mostrar el resultado final\nAl terminar el quiz debe mostrarse:\nQuiz finished!\nYour score: X / 10", "crumbs": [ "Bloque III Interacción", - "Semana 9", - "MA: *Uncontrolled fields* y `useRef`" ->>>>>>> 8e10774 (feat: explicacion semana 10 (#4)) + "Semana 10", + "T10: Quiz app!" ] }, { - "objectID": "pages/Bloque3/t9.html", - "href": "pages/Bloque3/t9.html", - "title": "T6: Romancero Gitano I", - "section": "", - "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado" + "objectID": "pages/Bloque4/Protocolos.html#http", + "href": "pages/Bloque4/Protocolos.html#http", + "title": "Protocolos de Comunicación", + "section": "HTTP", + "text": "HTTP\n¿Qué es HTTP?\nHTTP (HyperText Transfer Protocol) es el protocolo fundamental de la web.\nDefine cómo:\n\nEl cliente (navegador o app)\nSolicita recursos\nA un servidor" }, { - "objectID": "pages/Bloque3/t9.html#objetivo-de-la-tarea", - "href": "pages/Bloque3/t9.html#objetivo-de-la-tarea", - "title": "T6: Romancero Gitano I", - "section": "", - "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado" + "objectID": "pages/Bloque4/Protocolos.html#http-vs-comunicación-en-tiempo-real", + "href": "pages/Bloque4/Protocolos.html#http-vs-comunicación-en-tiempo-real", + "title": "Protocolos de Comunicación", + "section": "HTTP vs Comunicación en tiempo real", + "text": "HTTP vs Comunicación en tiempo real\nHTTP funciona bajo el modelo:\n\nPetición → Respuesta → Fin\n\nSi queremos datos continuamente:\n\nDebemos repetir peticiones\nIntroduce latencia\nIneficiente\n\nSolución: WebSockets" }, { - "objectID": "pages/Bloque3/t9.html#estructura-html", - "href": "pages/Bloque3/t9.html#estructura-html", - "title": "T6: Romancero Gitano I", - "section": "Estructura HTML", - "text": "Estructura HTML\nEl documento HTML debe:\n\nEstar correctamente estructurado (<!DOCTYPE>, <html>, <head>, <body>).\nContener un contenedor principal centrado horizontalmente.\nIncluir, en este orden:\n\nUn elemento para mostrar información métrica del poema (número de estrofas y versos).\nUn elemento para el título del poema.\nUn elemento para el texto del poema, respetando los saltos de verso utilizando la etiqueta <pre>.\nUn botón que permita cambiar de poema.\n\n\nNo debe utilizarse ningún framework ni librería externa." + "objectID": "pages/Bloque4/Protocolos.html#websockets", + "href": "pages/Bloque4/Protocolos.html#websockets", + "title": "Protocolos de Comunicación", + "section": "WebSockets", + "text": "WebSockets\nWebSockets permiten comunicación bidireccional persistente.\nCaracterísticas:\n\nConexión permanente\nCliente y servidor pueden enviar datos\nBaja latencia\nIdeal para tiempo real" }, { - "objectID": "pages/Bloque3/t9.html#javascript", - "href": "pages/Bloque3/t9.html#javascript", - "title": "T6: Romancero Gitano I", - "section": "JavaScript", - "text": "JavaScript\n\nDatos\nEn JavaScript se debe definir un array de objetos, donde cada objeto represente un poema y tenga al menos:\n\nUn título.\nEl texto del poema como una cadena de texto, usando saltos de línea para los versos.\n\nEl cambio de poema debe hacerse recorriendo este array de forma cíclica (cola circular) mediante el botón.\nDescargar poemas (click derecho guardar enlace como)\n\n\nManipulación del DOM\nEl comportamiento de la página debe implementarse exclusivamente con DOM nativo, cumpliendo lo siguiente:\n\nTodas las funciones deben declararse como arrow functions.\nAl pulsar el botón:\n\nSe actualiza el título.\nSe actualiza el texto del poema.\nSe modifica el formato del fondo.\nSe recalculan y muestran:\n\nNúmero de versos.\nNúmero de estrofas (bloques separados por líneas en blanco).\n\n\n\nEl cálculo debe realizarse a partir del texto del poema, no con valores predefinidos." + "objectID": "pages/Bloque4/Protocolos.html#hook-personalizado", + "href": "pages/Bloque4/Protocolos.html#hook-personalizado", + "title": "Protocolos de Comunicación", + "section": "Hook Personalizado", + "text": "Hook Personalizado\nSi usamos WebSockets directamente dentro del componente:\n\nMezclamos lógica de conexión con renderizado\nCódigo difícil de reutilizar\nProblemas de ciclo de vida\n\nSolución: Hook personalizado" }, { - "objectID": "pages/Bloque3/t9.html#css", - "href": "pages/Bloque3/t9.html#css", - "title": "T6: Romancero Gitano I", - "section": "CSS", - "text": "CSS\nLorca utiliza las metáforas y la alegoría como elemento principal sobre el que construye sus poemas, al analizar profundamente descubrimos que siempre recurre a las mismas metáforas.\nEl color no se utiliza aquí solo como elemento decorativo, sino como un recurso semántico: cada color representa un símbolo literario presente en el poema.\nDesde el punto de vista técnico: - Los colores de fondo y de texto deben definirse en clases CSS. - JavaScript no decide colores, únicamente decide qué clase aplicar según el contenido del poema.\n\nPalabras clave y colores asociados\nSe debe detectar el texto del poema las siguientes palabras clave y aplicar el color de fondo correspondiente:\n\nguardia civil → fondo verde militar\nsangre → fondo granate oscuro\ncaballo → fondo color tierra\ncuchillo / navaja → fondo plateado\n\nEl color del texto debe elegirse siempre de forma que exista contraste suficiente con el fondo y se garantice la legibilidad.\nSi el poema contiene varias palabras clave, solo debe aplicarse un único estilo, siguiendo un orden de prioridad definido previamente.\nSi el poema no contiene ninguna de estas palabras, se aplicará un estilo por defecto con colores aleatorios." + "objectID": "pages/Bloque4/Protocolos.html#visualización-de-datos", + "href": "pages/Bloque4/Protocolos.html#visualización-de-datos", + "title": "Protocolos de Comunicación", + "section": "Visualización de datos", + "text": "Visualización de datos\nEn aplicaciones reales no basta con mostrar texto.\nNecesitamos:\n\nGráficas\nPaneles de control\nVisualización clara\n\nUna librería popular para React es Recharts." }, { - "objectID": "pages/Bloque3/t9.html#extra-opcional-símbolo-aurora", - "href": "pages/Bloque3/t9.html#extra-opcional-símbolo-aurora", - "title": "T6: Romancero Gitano I", - "section": "Extra opcional: símbolo aurora 🌈", - "text": "Extra opcional: símbolo aurora 🌈\nDe forma voluntaria, se puede añadir el símbolo aurora, que tendrá prioridad absoluta sobre todos los demás.\nCuando el poema contenga la palabra aurora, el fondo debe mostrar un degradado animado.\n\nCSS necesario para el extra\n.aurora {\n background: linear-gradient(120deg,\n #ff005d,\n #ff9f1c,\n #ffee32,\n #3cff00,\n #00e5ff,\n #7a00ff,\n #ff00c8\n );\n background-size: 600% 600%;\n animation: aurora 10s linear infinite;\n color: black;\n}\n\n@keyframes aurora {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}" + "objectID": "pages/Bloque4/Protocolos.html#recharts", + "href": "pages/Bloque4/Protocolos.html#recharts", + "title": "Protocolos de Comunicación", + "section": "Recharts", + "text": "Recharts\nRecharts es una librería basada en:\n\nComponentes React\nSVG\nComposición declarativa\n\nInstalación:\nnpm install recharts" }, { - "objectID": "pages/Bloque3/t9.html#consejos", - "href": "pages/Bloque3/t9.html#consejos", - "title": "T6: Romancero Gitano I", - "section": "Consejos", - "text": "Consejos\n\nCentrado de la página (layout clásico)\nToda la página debe estar centrada horizontalmente.\nEl centrado se consigue mediante:\n\nUn contenedor con un ancho máximo definido.\nMárgenes automáticos a izquierda y derecha.\n\nDesde el punto de vista conceptual:\n\nmargin: 0 auto no centra texto, centra bloques.\nEl navegador reparte automáticamente el espacio sobrante a ambos lados del contenedor.\n\n\n\nAnimación del cambio de color\nPara evitar que los cambios de color sean bruscos, se utiliza la propiedad transition en CSS.\nEsta propiedad indica al navegador que los cambios en determinadas propiedades visuales deben hacerse de forma progresiva.\nEjemplo conceptual:\nbody {\n transition: background-color 0.6s, color 0.6s;\n}\nGracias a esta transición: - Cuando JavaScript cambia una clase o un color, - el navegador interpola automáticamente entre el color anterior y el nuevo.\nNo es necesario programar animaciones en JavaScript: CSS se encarga de todo el efecto visual.\n\n\nBúsqueda de una palabra\nPara buscar si determinada palabra determinada se debe utilizar la función includes de la clase string\n\ntexto = \"hoy nieva\";\n\ntexto.includes(\"nieva\"); //TRUE\ntexto.includes(\"llueve\"); //FALSE\n\n\nGeneración del color aleatorio\nPara la generacióndel color aleatorio de puede utilizar la siguiente función\nconst randomColor = () => '#' + Math.floor(Math.random() * 16777215).toString(16);\n\n\nConteo versos y estrofas\nEl recuento de versos y estrofas debe hacerse a partir del texto del poema, no con valores escritos a mano. A continuación se dan algunas pistas técnicas para abordar este problema.\n\nConteo de versos\nUn verso puede considerarse, a efectos prácticos en esta tarea, como una línea de texto no vacía.\nUna estrategia habitual consiste en: - Separar el texto por saltos de línea. - Eliminar las líneas vacías o formadas solo por espacios. - Contar cuántas líneas válidas quedan.\nEjemplo orientativo:\nconst versos = texto\n .split('\\n')\n .filter(linea => linea.trim() !== '')\n .length;\nEste enfoque es suficiente para la mayoría de los poemas del Romancero gitano y evita errores frecuentes.\n\n\nConteo de estrofas\nUna estrofa puede entenderse como un bloque de versos separado de otros bloques por una línea en blanco.\nUna posible estrategia es: - Separar el texto usando dos (o más) saltos de línea consecutivos. - Eliminar bloques vacíos. - Contar los bloques resultantes.\nEjemplo orientativo:\nconst estrofas = texto\n .split(/\\n\\s*\\n/)\n .filter(bloque => bloque.trim() !== '')\n .length;\nEntrega: un único archivo HTML funcional." + "objectID": "pages/Bloque4/Protocolos.html#integración-completa", + "href": "pages/Bloque4/Protocolos.html#integración-completa", + "title": "Protocolos de Comunicación", + "section": "Integración completa", + "text": "Integración completa\nWebSocket + Hook + Recharts\nObjetivo:\n\nVisualizar datos en tiempo real" }, { - "objectID": "pages/Bloque3/t9.html#recomendaciones-para-afrontar-la-tarea", - "href": "pages/Bloque3/t9.html#recomendaciones-para-afrontar-la-tarea", - "title": "T6: Romancero Gitano I", - "section": "Recomendaciones para afrontar la tarea", - "text": "Recomendaciones para afrontar la tarea\nAl enfrentarnos a un proyecto de cierta complejitud, el como afrontarlo resulta de cricial para el desarollo del mismo por ello a a continuación dejo un esquema de implementación modular. Sería mejor no utilizarlo, pero puede ser un buen punto de partida si no se sabe como empezar la app, no es el único proceso de implementación válido ni es más correcto que cualquier otro\n\nEstructura de HTML básica contadores de versos y estrofas placeholders de poema y título y botón\nFormateo CSS parte estática: centrado, tamaño (todo lo que no sea color)\nDefinir clases con colores predeterminados\nLógica interna con JS\n\n\nBuscar palabra\nContar estrofas\nConteo versos\nSelección de clase\nGenerar color aleatorio si procede\n\n\nIntegración con DOM" + "objectID": "pages/Bloque4/Protocolos.html#material", + "href": "pages/Bloque4/Protocolos.html#material", + "title": "Protocolos de Comunicación", + "section": "Material", + "text": "Material\nServidor de testing de Python: Enlace.\nInstalar websockets con pip install websockets\nTester de prueba: Enlace (click derecho guardar enlace como)\nhttps://recharts.github.io/" }, { - "objectID": "pages/Bloque3/reactI.html#sintaxis-jsx", - "href": "pages/Bloque3/reactI.html#sintaxis-jsx", - "title": "React I", - "section": "Sintaxis JSX", - "text": "Sintaxis JSX\n¿Qué es la sintaxis JSX?\n\nJSX (JavaScript XML) es una extensión de JavaScript utilizada en React.\n\nPermite escribir estructuras similares a HTML directamente dentro del código JavaScript.\n\nFacilita la creación y lectura de interfaces de usuario, integrando lógica y presentación.\n\nAunque su apariencia es HTML, JSX se transpila a JavaScript puro antes de ejecutarse en el navegador.\nForma cómoda de almacenar etiquetas html como variables de JS" + "objectID": "pages/Bloque4/protocolos.html", + "href": "pages/Bloque4/protocolos.html", + "title": "Protocolos de Comunicación", + "section": "", + "text": "Contenido", + "crumbs": [ + "Bloque IV Comunicación", + "Semana 11", + "Protocolos de Comunicación" + ] }, { - "objectID": "pages/Bloque3/reactI.html#react", - "href": "pages/Bloque3/reactI.html#react", - "title": "React I", - "section": "React", - "text": "React\nMotivación\nHasta el momento hemos trabajado únicamente con HTML5, el cual a pesar de ser muy eficaz, presenta el inconveniente de que no implementa ninguna clase de lógica. Es decir, si queremos repetir alguna estructura previamente definida deberemos copiarla y pegarla. Otro problema, de HTML puro es la complejidad que requiere el manejo del DOM, como ya se vio en la semana anterior.\nBajo este pretexto, introducimos el framework React diseñado por Meta." + "objectID": "pages/Bloque4/protocolos.html#http", + "href": "pages/Bloque4/protocolos.html#http", + "title": "Protocolos de Comunicación", + "section": "HTTP", + "text": "HTTP\n\n¿Qué es HTTP?\nHTTP (HyperText Transfer Protocol) es el protocolo fundamental de la web.\nDefine cómo:\n\nEl cliente (navegador o app)\nSolicita recursos\nA un servidor\n\nModelo conceptual:\nCliente → Solicitud HTTP → Servidor\nCliente ← Respuesta HTTP ← Servidor\nHTTP es sin estado (stateless).\nCada petición es independiente.\n\n\nComponentes de una petición\nUna petición HTTP contiene:\n\nMétodo\nURL\nCabeceras (headers)\nCuerpo (body, opcional)\n\nEjemplo conceptual:\nGET /users HTTP/1.1\nHost: api.example.com\nAuthorization: Bearer token\n\n\nMétodos HTTP principales\n\nGET\n\nSolicita datos\nNo modifica el servidor\nDebe ser idempotente\n\nEjemplo:\nGET /users\nUso típico en React:\nfetch(\"/api/users\")\n\n\n\nPOST\n\nEnvía datos al servidor\nCrea recursos nuevos\nTiene cuerpo\n\nEjemplo:\nfetch(\"/api/users\", {\n method: \"POST\",\n body: JSON.stringify({ name: \"Ana\" }),\n headers: { \"Content-Type\": \"application/json\" }\n});\n\n\nPUT\n\nActualiza completamente un recurso existente\nIdempotente\n\nPUT /users/3\n\n\nDELETE\n\nElimina un recurso\n\nDELETE /users/3\n\n\nHEAD\n\nIgual que GET\nNo devuelve cuerpo\nSolo cabeceras\n\nSe utiliza para:\n\nComprobar existencia\nTamaño\nMetadatos", + "crumbs": [ + "Bloque IV Comunicación", + "Semana 11", + "Protocolos de Comunicación" + ] }, { - "objectID": "pages/Bloque3/reactI.html#creación-de-una-reactjs-app", - "href": "pages/Bloque3/reactI.html#creación-de-una-reactjs-app", - "title": "React I", - "section": "Creación de una ReactJS app", - "text": "Creación de una ReactJS app\nEl desarrollo de aplicaciones web modernas requiere coordinar múltiples elementos: estructura del proyecto, gestión de dependencias, compilación del código y ejecución en el navegador.\nUn framework de desarrollo proporciona un entorno de trabajo preconfigurado que organiza estos elementos y establece una forma estándar de trabajar." + "objectID": "pages/Bloque4/protocolos.html#http-vs-comunicación-en-tiempo-real", + "href": "pages/Bloque4/protocolos.html#http-vs-comunicación-en-tiempo-real", + "title": "Protocolos de Comunicación", + "section": "HTTP vs Comunicación en tiempo real", + "text": "HTTP vs Comunicación en tiempo real\nHTTP funciona bajo el modelo:\n\nPetición → Respuesta → Fin\n\nSi queremos datos continuamente:\n\nDebemos repetir peticiones\nIntroduce latencia\nIneficiente\n\nSolución: WebSockets", + "crumbs": [ + "Bloque IV Comunicación", + "Semana 11", + "Protocolos de Comunicación" + ] }, { - "objectID": "pages/Bloque3/ReactI.html", - "href": "pages/Bloque3/ReactI.html", - "title": "React I", - "section": "", - "text": "Contenido", + "objectID": "pages/Bloque4/protocolos.html#websockets", + "href": "pages/Bloque4/protocolos.html#websockets", + "title": "Protocolos de Comunicación", + "section": "WebSockets", + "text": "WebSockets\nWebSockets permiten comunicación bidireccional persistente.\nCaracterísticas:\n\nConexión permanente\nCliente y servidor pueden enviar datos\nBaja latencia\nIdeal para tiempo real\n\nEjemplos:\n\nChats\nJuegos online\nTelemetría\nTrading\nSistemas IoT\n\n\nFlujo conceptual\nCliente ↔ Servidor\n conexión abierta\nNo se crea una nueva conexión por mensaje.\n\n\nCreación de un WebSocket en JavaScript\nconst socket = new WebSocket(\"ws://localhost:8080\");\nEventos principales:\n\nonopen\nonmessage\nonclose\nonerror\n\n\n\nRecepción de mensajes\nsocket.onmessage = (event) => {\n console.log(\"Mensaje:\", event.data);\n};\n\n\nEnvío de mensajes\nsocket.send(\"Hola servidor\");", "crumbs": [ - "Bloque III Interacción", - "Semana 7", - "React I" + "Bloque IV Comunicación", + "Semana 11", + "Protocolos de Comunicación" ] }, { - "objectID": "pages/Bloque3/ReactI.html#sintaxis-jsx", - "href": "pages/Bloque3/ReactI.html#sintaxis-jsx", - "title": "React I", - "section": "Sintaxis JSX", - "text": "Sintaxis JSX\n\n¿Qué es la sintaxis JSX?\n\nJSX (JavaScript XML) es una extensión de JavaScript utilizada en React.\n\nPermite escribir estructuras similares a HTML directamente dentro del código JavaScript.\n\nFacilita la creación y lectura de interfaces de usuario, integrando lógica y presentación.\n\nAunque su apariencia es HTML, JSX se transpila a JavaScript puro antes de ejecutarse en el navegador.\nForma cómoda de almacenar etiquetas html como variables de JS\n\n\n\n¿Qué nos ofrece la sintaxis JSX?\n\nAlmacenar una etiqueta como una variable\nconst title = <h1>Web del TC de SW</h1>;\n\nconst driveIndication = (drives)? <p>Puede conducir</p> : <p>No puede conducir</p>;\nDe esta forma la variable title se corresponde con una etiqueta que contiene el título. Sin embargo, como podemos podemos utilizar está etiqueta una vez la hemos definido como una variable.\n\n\nRenderizar etiquetas dentro de etiquetas\nconst title = <h1>Web del TC de SW</h1>;\n\nconst page = <div>{title}</div>\nDe esta forma estámos encapsulando la etiqueta h1 dentro del div.\n\n\nRenderizar con el map\nconst profeAsi= [[\"Rosa\", \"Macro I\"], [\"Gabriela\", \"FSO\"],[\"Yolanda\",\"LTP\"], [\"Ferrán\", \"EM\"], [\"Pepe\", \"TCO\"]];\n\n// Array de li Asignatura: nombre profesor\nconst itemsProfAsi = profeAsi.map(x => <li>{x[1]}: {x[0]}</li>);\n\nconst listaProfesoresAsignatura = <ul>{itemsProfAsi}</ul>;\n\n\nRenderizar con el map\nconst profeAsi= [[\"Rosa\", \"Macro I\"], [\"Gabriela\", \"FSO\"], [\"Yolanda\",\"LTP\"], [\"Ferrán\", \"EM\"], [\"Pepe\", \"TCO\"]];\n\nconst listaProfesoresAsignatura = <ul>\n{profeAsi.map((x,i) => <li key={i}>{x[1]}: {x[0]}</li>)}\n</ul>;", + "objectID": "pages/Bloque4/protocolos.html#hook-personalizado", + "href": "pages/Bloque4/protocolos.html#hook-personalizado", + "title": "Protocolos de Comunicación", + "section": "Hook Personalizado", + "text": "Hook Personalizado\nSi usamos WebSockets directamente dentro del componente:\n\nMezclamos lógica de conexión con renderizado\nCódigo difícil de reutilizar\nProblemas de ciclo de vida\n\nSolución: Hook personalizado\n\nHook personalizado\nUn hook personalizado es:\n\nUna función que utiliza hooks internos para encapsular lógica reutilizable\n\nConvención:\nuseNombre()\n\n\nHook useWebSocket\nimport { useEffect, useState } from \"react\";\n\nexport function useWebSocket(url) {\n\n const [data, setData] = useState(null);\n\n useEffect(() => {\n\n const socket = new WebSocket(url);\n\n socket.onmessage = (event) => {\n setData(event.data);\n };\n\n return () => socket.close();\n\n }, [url]);\n\n return data;\n}\n\n\nAnálisis conceptual\n\nSe crea la conexión al montar\nSe actualiza el estado al recibir datos\nSe cierra al desmontar\nEl componente solo consume datos\n\n\n\nUso del hook\nfunction Monitor() {\n\n const data = useWebSocket(\"ws://localhost:8080\");\n\n return (\n <div>\n <h2>Datos en tiempo real</h2>\n <p>{data}</p>\n </div>\n );\n}\nFlujo:\n\nComponente se renderiza\n\nHook abre conexión\n\nLlegan datos\n\nEstado cambia\n\nNuevo render", "crumbs": [ - "Bloque III Interacción", - "Semana 7", - "React I" + "Bloque IV Comunicación", + "Semana 11", + "Protocolos de Comunicación" ] }, { - "objectID": "pages/Bloque3/ReactI.html#react", - "href": "pages/Bloque3/ReactI.html#react", - "title": "React I", - "section": "React", - "text": "React\n\nMotivación\nHasta el momento hemos trabajado únicamente con HTML5, el cual a pesar de ser muy eficaz, presenta el inconveniente de que no implementa ninguna clase de lógica. Es decir, si queremos repetir alguna estructura previamente definida deberemos copiarla y pegarla. Otro problema, de HTML puro es la complejidad que requiere el manejo del DOM, como ya se vio en la semana anterior.\nBajo este pretexto, introducimos el framework React diseñado por Meta.\n\n\nBases de React\nReact es un componente basado en la sintaxis JS y en la programación funcional introducida en ES6.\n\n\nComponente React\nLos componentes de React los definimos como unidades reutilizables y modulares que se implementan de esta forma: una función que devuelve un objeto de JSX\nfunction Saludo() {\n return <h1>Hola, mundo</h1>;\n}\nPodemos renderizar nuestro componente Saludo asumiendo que se comporta como una etiqueta html. Recordemos que no lo es.\n<main>\n <Saludo />\n</main>\nDentro de este componente podemos incluir lógica propia de JavaScript, de forma que al definir componente podemos dotarlo de lógica interna.\nfunction DivNúmeroAleatorio() {\n\n let n = Math.random();\n return <div className=\"n-random\">{n}</div>;\n}\n*Nótese que aunque JS utilice camelCase para el nombre de las funciones, con React utilizaremos PascalCase para definir los componentes puesto que a pesar de que se trata de funciones, trabajaremos con ellas como si fuesen clases.\n\n\nProps en React\nHasta ahora, los componentes definidos siempre devuelven el mismo contenido. Sin embargo, para que un componente sea realmente reutilizable, necesitamos poder pasarle información desde el exterior.\nEn React, esta información se transmite mediante props (properties).\nLas props se definen como los parámetros de entrada de un componente y permiten personalizar su comportamiento o su contenido sin modificar su definición interna.\n\nEjemplo 1: uso de props (forma explícita)\nfunction Saludo(props) {\n return <h1>Hola, {props.nombre}</h1>;\n}\nUso del componente:\n<Saludo nombre=\"Rosa\" />\n<Saludo nombre=\"Gabriela\" />\n\n\nEjemplo 2: props desestructuradas (sintaxis JavaScript)\nfunction Saludo({ nombre }) {\n return <h1>Hola, {nombre}</h1>;\n}\nUso del componente (idéntico al anterior):\n<Saludo nombre=\"Rosa\" />\n<Saludo nombre=\"Gabriela\" />\n\n\n\nEventos en React\nEn React, el manejo de eventos se basa en los eventos del DOM, pero utilizando una sintaxis propia de JSX y siguiendo el estilo de JavaScript.\n\nEjemplo básico de evento\nfunction BotonSaludo() {\n\n function manejarClick() {\n alert(\"Hola desde React\");\n }\n\n return (\n <button onClick={manejarClick}>\n Saludar\n </button>\n );\n}\n\n\nPaso de funciones como eventos\nLa función asociada al evento no se ejecuta al renderizar el componente, sino únicamente cuando ocurre el evento; es decir la pasamos como un ciudadano de primera clase.\n<button onClick={manejarClick}>Saludar</button>\nIncorrecto:\n<button onClick={manejarClick()}>Saludar</button>\n\n\nEventos más habituales en React\nReact soporta la mayoría de los eventos del DOM, adaptados a la sintaxis JSX. A continuación se listan los eventos más utilizados, clasificados por tipo.\n\nEventos de ratón\n\nonClick\nonDoubleClick\nonMouseEnter\nonMouseLeave\nonMouseMove\nonMouseDown\nonMouseUp\n\n\n\nEventos de teclado\n\nonKeyDown\nonKeyUp\nonKeyPress\n\n\n\nEventos de formularios\n\nonChange\nonSubmit\nonFocus\nonBlur\nonInput\nonReset\n\n\n\nEventos de carga y ciclo del elemento\n\nonLoad\nonError\n\n\n\nEventos de selección y portapapeles\n\nonSelect\nonCopy\nonCut\nonPaste\n\n\n\nEventos táctiles (dispositivos móviles)\n\nonTouchStart\nonTouchMove\nonTouchEnd\nonTouchCancel\n\n\n\n\n\nCiclo de vida de los componentes y renderizado en React\nEn React, los componentes no se renderizan directamente sobre el DOM real, sino que siguen un proceso intermedio que permite optimizar las actualizaciones de la interfaz.\nLa idea clave es que la interfaz se organiza como un árbol de componentes, análogo al árbol del DOM, pero a un nivel de abstracción superior.\n\nEl árbol de componentes\nCuando una aplicación React se ejecuta:\n\nCada componente genera otros componentes o elementos JSX.\nReact construye un árbol de componentes, donde:\n\nEl componente raíz suele ser App\nCada componente hijo ocupa una rama del árbol\n\n\nEste árbol de componentes se corresponde conceptualmente con el árbol del DOM, aunque no es el DOM real.\n\n\nProceso de renderizado\nEl proceso general es el siguiente:\n\nReact ejecuta un componente (función).\nEl componente devuelve JSX.\nEl JSX se transforma en una representación interna del árbol.\nReact compara este árbol con el anterior.\nSolo se actualizan en el DOM real los nodos que han cambiado.\n\nDe esta forma, React minimiza el acceso directo al DOM, que es una operación costosa.\n\n\nCiclo de vida (visión simplificada)\nDesde un punto de vista conceptual, un componente pasa por tres fases:\n\nMontaje\n\nEl componente se crea y se inserta en el DOM.\n\nActualización\n\nEl componente se vuelve a renderizar cuando cambian sus datos.\n\nDesmontaje\n\nEl componente se elimina del DOM.\n\n\nEn componentes funcionales modernos, este ciclo se gestiona de forma implícita mediante el renderizado y, más adelante, mediante hooks.\n\n\nRelación con el DOM\n\nEn JavaScript puro:\n\nSe modifica el DOM directamente.\n\nEn React:\n\nSe describe cómo debe ser la interfaz.\nReact decide el cuándo y el cómo modificar el DOM.\n\n\nEl desarrollador no recorre ni manipula el árbol del DOM, sino que trabaja sobre el árbol de componentes.", + "objectID": "pages/Bloque4/protocolos.html#visualización-de-datos", + "href": "pages/Bloque4/protocolos.html#visualización-de-datos", + "title": "Protocolos de Comunicación", + "section": "Visualización de datos", + "text": "Visualización de datos\nEn aplicaciones reales no basta con mostrar texto.\nNecesitamos:\n\nGráficas\nPaneles de control\nVisualización clara\n\nUna librería popular para React es Recharts.", "crumbs": [ - "Bloque III Interacción", - "Semana 7", - "React I" + "Bloque IV Comunicación", + "Semana 11", + "Protocolos de Comunicación" ] }, { - "objectID": "pages/Bloque3/ReactI.html#creación-de-una-reactjs-app", - "href": "pages/Bloque3/ReactI.html#creación-de-una-reactjs-app", - "title": "React I", - "section": "Creación de una ReactJS app", - "text": "Creación de una ReactJS app\nEl desarrollo de aplicaciones web modernas requiere coordinar múltiples elementos: estructura del proyecto, gestión de dependencias, compilación del código y ejecución en el navegador.\nUn framework de desarrollo proporciona un entorno de trabajo preconfigurado que organiza estos elementos y establece una forma estándar de trabajar.\n\n¿Para qué sirve un framework?\nUn framework permite al desarrollador:\n\nEvitar configuraciones manuales complejas\nSeguir una estructura común de proyecto\nAutomatizar tareas repetitivas\nCentrarse en la lógica de la aplicación y no en la infraestructura\n\nEn lugar de partir de un proyecto vacío, el framework ofrece una base funcional sobre la que desarrollar.\n\n\nFramework y React\nReact se encarga de definir cómo se construye la interfaz, pero no gestiona por sí mismo:\n\nLa estructura de archivos\nEl arranque de la aplicación\nLa compilación del código\nEl servidor de desarrollo\n\nPor ello, React se apoya en un framework que orquesta el entorno de ejecución.\n\n\nCreación de la aplicación\nPara crear una nueva aplicación React utilizando un framework, se ejecuta el siguiente comando en la terminal:\nnpm create vite@latest\nEste comando genera:\n\nUna estructura inicial del proyecto\nLa configuración necesaria para trabajar con React\nUn entorno listo para el desarrollo", + "objectID": "pages/Bloque4/protocolos.html#recharts", + "href": "pages/Bloque4/protocolos.html#recharts", + "title": "Protocolos de Comunicación", + "section": "Recharts", + "text": "Recharts\nRecharts es una librería basada en:\n\nComponentes React\nSVG\nComposición declarativa\n\nInstalación:\nnpm install recharts\n\nEjemplo básico\nimport {\n LineChart, Line, XAxis, YAxis,\n CartesianGrid, Tooltip\n} from \"recharts\";\n\nconst data = [\n { t: 1, v: 10 },\n { t: 2, v: 15 },\n { t: 3, v: 8 }\n];\n\nfunction Grafica() {\n return (\n <LineChart width={400} height={300} data={data}>\n <CartesianGrid stroke=\"#ccc\" />\n <XAxis dataKey=\"t\" />\n <YAxis />\n <Tooltip />\n <Line type=\"monotone\" dataKey=\"v\" stroke=\"#8884d8\" />\n </LineChart>\n );\n}\n\n\nInterpretación\nCada objeto representa un punto.\n{ t: 1, v: 10 }\n\nt → eje X\nv → eje Y", "crumbs": [ - "Bloque III Interacción", - "Semana 7", - "React I" + "Bloque IV Comunicación", + "Semana 11", + "Protocolos de Comunicación" + ] + }, + { + "objectID": "pages/Bloque4/protocolos.html#integración-completa", + "href": "pages/Bloque4/protocolos.html#integración-completa", + "title": "Protocolos de Comunicación", + "section": "Integración completa", + "text": "Integración completa\nWebSocket + Hook + Recharts\nObjetivo:\n\nVisualizar datos en tiempo real\n\n\nEjemplo conceptual\nfunction Dashboard() {\n\n const data = useWebSocket(\"ws://localhost:8080\");\n\n const chartData = data\n ? JSON.parse(data)\n : [];\n\n return (\n <LineChart width={500} height={300} data={chartData}>\n <XAxis dataKey=\"time\" />\n <YAxis />\n <Tooltip />\n <Line dataKey=\"value\" stroke=\"#82ca9d\" />\n </LineChart>\n );\n}\n\n\nFlujo completo de una app moderna\nServidor → WebSocket → Hook → Estado → React → Gráfica\nArquitectura típica de sistemas en tiempo real.", + "crumbs": [ + "Bloque IV Comunicación", + "Semana 11", + "Protocolos de Comunicación" + ] + }, + { + "objectID": "pages/Bloque4/protocolos.html#material", + "href": "pages/Bloque4/protocolos.html#material", + "title": "Protocolos de Comunicación", + "section": "Material", + "text": "Material\nServidor de testing de Python: Enlace.\nInstalar websockets con pip install websockets\nTester de prueba: Enlace (click derecho guardar enlace como)\nhttps://recharts.github.io/", + "crumbs": [ + "Bloque IV Comunicación", + "Semana 11", + "Protocolos de Comunicación" ] }, { diff --git a/pages/Bloque4/Server.py b/pages/Bloque4/Server.py new file mode 100644 index 0000000..fdd1099 --- /dev/null +++ b/pages/Bloque4/Server.py @@ -0,0 +1,123 @@ +import asyncio +import json +import random +import threading +from http.server import BaseHTTPRequestHandler, HTTPServer +from datetime import datetime + +import websockets + + +# ========================================================= +# HTTP SERVER — PORT 3001 +# ========================================================= + +class TestHandler(BaseHTTPRequestHandler): + + # ----------- CORS HEADERS ----------- + + def _set_cors_headers(self): + self.send_header("Access-Control-Allow-Origin", "*") + self.send_header("Access-Control-Allow-Methods", "GET, POST, OPTIONS") + self.send_header("Access-Control-Allow-Headers", "Content-Type") + + # ----------- OPTIONS (PRE-FLIGHT) ----------- + + def do_OPTIONS(self): + self.send_response(200) + self._set_cors_headers() + self.end_headers() + + # ----------- COMMON HANDLER ----------- + + def _handle_request(self): + content_length = int(self.headers.get('Content-Length', 0)) + body = self.rfile.read(content_length) if content_length > 0 else b'' + + print("\n==============================") + print("HTTP REQUEST RECEIVED") + print("Method:", self.command) + print("Path:", self.path) + print("Headers:", dict(self.headers)) + print("Body:", body.decode(errors="ignore")) + print("==============================\n") + + self.send_response(200) + self._set_cors_headers() + self.send_header("Content-Type", "text/plain") + self.end_headers() + + self.wfile.write(b"OK") + + def do_GET(self): + self._handle_request() + + def do_POST(self): + self._handle_request() + + def log_message(self, format, *args): + return + + +def run_http_server(): + server = HTTPServer(("0.0.0.0", 3001), TestHandler) + print("HTTP server listening on port 3001") + server.serve_forever() + + +# ========================================================= +# WEBSOCKET SERVER — PORT 3002 +# ========================================================= + +async def ws_handler(websocket): + print("WebSocket client connected") + + data_buffer = [] + + try: + while True: + value = random.uniform(0, 100) + + data_buffer.append({ + "time": datetime.now().strftime("%H:%M:%S"), + "value": value + }) + + data_buffer = data_buffer[-20:] + + await websocket.send(json.dumps(data_buffer)) + await asyncio.sleep(1) + + except websockets.exceptions.ConnectionClosedOK: + print("Client disconnected normally") + + except websockets.exceptions.ConnectionClosedError: + print("Client disconnected with error") + + +async def run_ws_server(): + print("WebSocket server listening on port 3002") + + async with websockets.serve( + ws_handler, + "0.0.0.0", + 3002 + ): + await asyncio.Future() + + +# ========================================================= +# MAIN +# ========================================================= + +if __name__ == "__main__": + + print("\n=== TEST SERVER STARTING ===") + + http_thread = threading.Thread( + target=run_http_server, + daemon=True + ) + http_thread.start() + + asyncio.run(run_ws_server()) \ No newline at end of file diff --git a/pages/Bloque4/protocolos.qmd b/pages/Bloque4/protocolos.qmd new file mode 100644 index 0000000..f9ed2f4 --- /dev/null +++ b/pages/Bloque4/protocolos.qmd @@ -0,0 +1,581 @@ +--- +title: "Protocolos de Comunicación" +subtitle: "HTTP, WebSockets, Hooks personalizados y Recharts" +author: "Javier Ribal del Río" +date: "2026-03-13" +date-modified: today +affiliation: "Hyperloop UPV" + +format: + html: default + revealjs: + history: false + chalkboard: true + output-file: Protocolos.html + parallax-background-image: ../../img/fondo.png + parallax-background-size: "cover" + pdf: default +format-links: + - pdf + - format: revealjs + text: Presentación + icon: file-slides +--- + +**Contenido** + +- HTTP básico para desarrollo web +- Métodos GET, POST, PUT, DELETE, HEAD +- WebSockets +- Hook personalizado para conexión en tiempo real +- Gráficas con Recharts + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +## HTTP +### ¿Qué es HTTP? + +HTTP (*HyperText Transfer Protocol*) es el protocolo fundamental de la web. + +Define cómo: + +- El cliente (navegador o app) +- Solicita recursos +- A un servidor + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +Modelo conceptual: + +``` +Cliente → Solicitud HTTP → Servidor +Cliente ← Respuesta HTTP ← Servidor +``` + +HTTP es **sin estado (stateless)**. + +Cada petición es independiente. + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Componentes de una petición + +Una petición HTTP contiene: + +- Método +- URL +- Cabeceras (*headers*) +- Cuerpo (*body*, opcional) + +Ejemplo conceptual: + +``` +GET /users HTTP/1.1 +Host: api.example.com +Authorization: Bearer token +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Métodos HTTP principales + +#### GET + +- Solicita datos +- No modifica el servidor +- Debe ser idempotente + +Ejemplo: + +``` +GET /users +``` + + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +Uso típico en React: + +```jsx +fetch("/api/users") +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### POST + +- Envía datos al servidor +- Crea recursos nuevos +- Tiene cuerpo + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +Ejemplo: + +```jsx +fetch("/api/users", { + method: "POST", + body: JSON.stringify({ name: "Ana" }), + headers: { "Content-Type": "application/json" } +}); +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### PUT + +- Actualiza completamente un recurso existente +- Idempotente + +``` +PUT /users/3 +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### DELETE + +- Elimina un recurso + +``` +DELETE /users/3 +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### HEAD + +- Igual que GET +- No devuelve cuerpo +- Solo cabeceras + +Se utiliza para: + +- Comprobar existencia +- Tamaño +- Metadatos + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +## HTTP vs Comunicación en tiempo real + +HTTP funciona bajo el modelo: + +> Petición → Respuesta → Fin + +Si queremos datos continuamente: + +- Debemos repetir peticiones +- Introduce latencia +- Ineficiente + +Solución: **WebSockets** + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +## WebSockets + +WebSockets permiten comunicación bidireccional persistente. + +Características: + +- Conexión permanente +- Cliente y servidor pueden enviar datos +- Baja latencia +- Ideal para tiempo real + + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +Ejemplos: + +- Chats +- Juegos online +- Telemetría +- Trading +- Sistemas IoT + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Flujo conceptual + +``` +Cliente ↔ Servidor + conexión abierta +``` + +No se crea una nueva conexión por mensaje. + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Creación de un WebSocket en JavaScript + +```jsx +const socket = new WebSocket("ws://localhost:8080"); +``` + +Eventos principales: + +- `onopen` +- `onmessage` +- `onclose` +- `onerror` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Recepción de mensajes + +```js +socket.onmessage = (event) => { + console.log("Mensaje:", event.data); +}; +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Envío de mensajes + +```js +socket.send("Hola servidor"); +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: +## Hook Personalizado + +Si usamos WebSockets directamente dentro del componente: + +- Mezclamos lógica de conexión con renderizado +- Código difícil de reutilizar +- Problemas de ciclo de vida + +Solución: **Hook personalizado** + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Hook personalizado + +Un hook personalizado es: + +> Una función que utiliza hooks internos para encapsular lógica reutilizable + +Convención: + +``` +useNombre() +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Hook `useWebSocket` + +```jsx +import { useEffect, useState } from "react"; + +export function useWebSocket(url) { + + const [data, setData] = useState(null); + + useEffect(() => { + + const socket = new WebSocket(url); + + socket.onmessage = (event) => { + setData(event.data); + }; + + return () => socket.close(); + + }, [url]); + + return data; +} +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Análisis conceptual + +- Se crea la conexión al montar +- Se actualiza el estado al recibir datos +- Se cierra al desmontar +- El componente solo consume datos + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Uso del hook + +```jsx +function Monitor() { + + const data = useWebSocket("ws://localhost:8080"); + + return ( +
    +

    Datos en tiempo real

    +

    {data}

    +
    + ); +} +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +Flujo: + +1. Componente se renderiza +2. Hook abre conexión +3. Llegan datos +4. Estado cambia +5. Nuevo render + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +## Visualización de datos + +En aplicaciones reales no basta con mostrar texto. + +Necesitamos: + +- Gráficas +- Paneles de control +- Visualización clara + +Una librería popular para React es **Recharts**. + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +## Recharts + +Recharts es una librería basada en: + +- Componentes React +- SVG +- Composición declarativa + +Instalación: + +```bash +npm install recharts +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Ejemplo básico + +```jsx +import { + LineChart, Line, XAxis, YAxis, + CartesianGrid, Tooltip +} from "recharts"; + +const data = [ + { t: 1, v: 10 }, + { t: 2, v: 15 }, + { t: 3, v: 8 } +]; + +function Grafica() { + return ( + + + + + + + + ); +} +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Interpretación + +Cada objeto representa un punto. + +``` +{ t: 1, v: 10 } +``` + +- `t` → eje X +- `v` → eje Y + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +## Integración completa + +WebSocket + Hook + Recharts + +Objetivo: + +> Visualizar datos en tiempo real + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Ejemplo conceptual + +```jsx +function Dashboard() { + + const data = useWebSocket("ws://localhost:8080"); + + const chartData = data + ? JSON.parse(data) + : []; + + return ( + + + + + + + ); +} +``` + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +### Flujo completo de una app moderna + +``` +Servidor → WebSocket → Hook → Estado → React → Gráfica +``` + +Arquitectura típica de sistemas en tiempo real. + +::: {.content-visible when-format="revealjs"} + +--- + +::: + +## Material + +Servidor de testing de _Python_: [Enlace](Server.py). + +Instalar `websockets` con `pip install websockets` + +Tester de prueba: [Enlace](tester_http_ws_basic.html) (click derecho guardar enlace como) + +[https://recharts.github.io/](https://recharts.github.io/) \ No newline at end of file diff --git a/pages/Bloque4/tester_http_ws_basic.html b/pages/Bloque4/tester_http_ws_basic.html new file mode 100644 index 0000000..5343719 --- /dev/null +++ b/pages/Bloque4/tester_http_ws_basic.html @@ -0,0 +1,444 @@ + + + + + + Tester HTTP + WebSocket + + + +
    +

    Tester HTTP + WebSocket

    +

    Página básica en HTML y JavaScript para probar tu servidor HTTP en el puerto 3001 y el WebSocket en el puerto 3002.

    + +
    +
    +

    HTTP

    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +

    El body solo se enviará en POST. El servidor debería mostrar por consola el método, la ruta, los headers y el body.

    +
    + +
    +

    Respuesta HTTP

    + Sin petición + 
    Aquí aparecerá la respuesta del servidor.
    +
    + +
    +

    WebSocket

    +
    + + +
    +
    + + + +
    +
    + Desconectado +
    +

    Se espera recibir un JSON con este formato: [{"time":"12:00:00","value":10}, ...]

    +
    + +
    +

    Mensajes WebSocket

    + 
    Aquí aparecerán los mensajes recibidos por WebSocket.
    +
    + +
    +

    Gráfica en tiempo real

    + +

    La gráfica usa los campos time y value del array recibido por WebSocket.

    +
    +
    +
    + + + +