17 | );
18 | };
19 |
20 | export default HomePage;
21 |
--------------------------------------------------------------------------------
/Tema_6/Ejercicios/Calculadora/Readme.md:
--------------------------------------------------------------------------------
1 | # API de una calculadora online
2 |
3 | En este ejercicio vamos a diseñar la API REST de una calculadora.
4 |
5 | Las operaciones que la API debe soportar son las siguientes:
6 | - Sumar N elementos (2+2, 2+2+2).
7 | - Restar N elementos (2-2, 2-2-2).
8 | - Multiplicar 2 elementos (2x2).
9 | - Dividir 2 elementos (2/2).
10 | - Raiz N-ésima de un número (Raíz cuadrada de 4, Raíz cúbica de 8).
11 | - Potencia N-ésima de un número (2^2, 3^3, 4^4).
12 | - Detalle de operacion
13 |
14 | Nuestra calculadora tendrá memoria y siempre se podrán consultar los datos de operaciones realizadas, a través de un ID de operación.
--------------------------------------------------------------------------------
/Tema_6/Ejercicios/Cinema/Readme.md:
--------------------------------------------------------------------------------
1 | # API de un sistema de reserva de butacas de cine
2 |
3 | En este ejercicio vamos a diseñar la API REST para el cine en el que venimos trabajando en los ejercicios de los anteriores temas.
4 |
5 | Las operaciones que la API debe soportar son las siguientes:
6 | - Crear, eliminar y modificar películas.
7 | - Crear, eliminar y modificar (parcialmente) salas.
8 | - Crear, eliminar y modificar (parcialmente) usuarios.
9 | - Crear una reserva para un usuario en una sala.
10 | - Cancelar una reserva para un usuario en una sala.
11 | - Modificar una reserva para un usuario en una sala.
12 | - Registrar un pago de una reserva.
--------------------------------------------------------------------------------
/Tema_1/Codigo de ejemplo/Extra-FlexLayouts/Flexbox/flexbox2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Flexbox - 2
6 |
7 |
8 |
31 | Click on the Vite and React logos to learn more
32 |
33 |
34 | )
35 | }
36 |
37 | export default App
38 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/unir-delivery/src/styles/styles.css:
--------------------------------------------------------------------------------
1 | /* Estilo general en modo oscuro */
2 | body {
3 | background-color: #1a1a1a;
4 | color: #fff;
5 | font-family: 'Arial', sans-serif;
6 | }
7 |
8 | .card {
9 | background-color: #333;
10 | border: 1px solid #444;
11 | border-radius: 8px;
12 | padding: 20px;
13 | margin: 20px;
14 | color: #f0e68c;
15 | }
16 |
17 | .restaurant-container {
18 | display: flex;
19 | flex-wrap: wrap;
20 | justify-content: space-around;
21 | }
22 |
23 | .restaurant-container > * {
24 | flex: 1 1 40%; /* Esto hará que los elementos ocupen aproximadamente el 40% del ancho del contenedor, pero se ajustarán para evitar el desbordamiento */
25 | max-width: 40%; /* Esto limitará el ancho de los elementos al 40% del contenedor */
26 | margin: 10px; /* Esto agregará un poco de espacio alrededor de los elementos */
27 | }
28 |
29 | .header-footer {
30 | background-color: #222;
31 | padding: 10px;
32 | text-align: center;
33 | }
34 |
35 | .header-footer-text {
36 | color: #f0e68c;
37 | }
38 |
39 | .center-text {
40 | text-align: center;
41 | }
--------------------------------------------------------------------------------
/Tema_8/Ejercicios/Calculadora/Readme.md:
--------------------------------------------------------------------------------
1 | # Creación de una aplicación con Spring y H2.
2 |
3 | El ejercicio consiste en implementar la API que has definido para una calculadora en el tema anterior.
4 |
5 | Para llevar a cabo este ejercicio haz uso de las siguientes lecciones magistrales que encontrarás en el campus:
6 | - Tema 8 -> Creación de una aplicación con Spring.
7 | - Tema 8 -> Scopes de Spring: Singleton vs. Prototype.
8 | - Tema 6 -> Consumir una API REST con Postman.
9 | - Primera sesión de clase del tema 8.
10 |
11 | Además, se recomienda hacer uso de estas guías para poder mapear relaciones 1-1, 1-N, M-N con Spring Data JPA (**en el caso de ser necesario**)
12 | - [Guía 1:1](https://www.baeldung.com/jpa-one-to-one)
13 | - [Guía 1:N](https://www.baeldung.com/hibernate-one-to-many)
14 | - [Guía M:N](https://www.baeldung.com/jpa-many-to-many)
15 |
16 | ## Entrega
17 |
18 | Dentro del repositorio de ejercicios de tu clase (encontrarás el enlace en el Aula Virtual), crea una carpeta llamada `Calculadora`.
19 | La entrega consiste en el código de la implementación (únicamente la carpeta src y archivo pom.xml). Utiliza H2 como base de datos.
20 |
--------------------------------------------------------------------------------
/Tema_3/Codigo de ejemplo/00_Callbacks.js:
--------------------------------------------------------------------------------
1 | let saludo = () => {
2 | console.log("Hello there!");
3 | }
4 | saludo.from = "Obi-Wan Kenobi";
5 |
6 | console.log(saludo.name);
7 | console.log(saludo.from);
8 | console.log(saludo.to);
9 |
10 | saludo();
11 |
12 | saludo = () => {
13 | console.log("Hello there from Tatooine!")
14 | }
15 | saludo();
16 |
17 |
18 | /**
19 | * Callbacks
20 | *
21 | * Un callback es algo tan simple como pasar como argumento a una función otra función
22 | * Esto puede parecer una locura en algunos lenguajes de programacion
23 | * En JS las funciones SON OBJETOS. Si las definimos con modificadores, se recomienda usar const.
24 | */
25 | const isPar = (n, parCallBack, imparCallback) => {
26 | if (n%2 === 0) {
27 | parCallBack();
28 | } else {
29 | imparCallback();
30 | }
31 | }
32 | isPar(4, () => console.log("El numero es par"));
33 | //isPar(5, () => console.log("El numero es par"));
34 |
35 | const parCallBack = () => console.log("El numero es par");
36 | const imparCallBack = () => console.log("El numero es impar");
37 |
38 | isPar(6, parCallBack, imparCallBack);
39 | isPar(7, parCallBack, imparCallBack);
40 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/hooks-router-ejemplo/src/components/Rombo.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from "react";
2 | import { GeoContext } from "./GeoContext";
3 | import {useNavigate} from "react-router";
4 |
5 | export const Rombo = () => {
6 | const [clicks, setClicks] = useState(0);
7 | const { globalClicks, updateClicks } = useContext(GeoContext);
8 | const navigate = useNavigate();
9 |
10 | console.log("Renderizando Rombo...");
11 |
12 | useEffect(() => {
13 | console.log("Efecto de montaje ejecutado");
14 | }, []);
15 | useEffect(() => {
16 | console.log("Efecto con cualquier dependencia ejecutado");
17 | });
18 | useEffect(() => {
19 | console.log("Efecto ligado a click local");
20 | }, [clicks]);
21 | useEffect(() => {
22 | console.log("Efecto ligado a click global");
23 | }, [globalClicks]);
24 |
25 | return (
26 |
27 | Rombo
28 |
29 |
30 |
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/unir-delivery-hooks-and-router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "unir-delivery-hooks-and-router",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@emotion/react": "^11.11.1",
7 | "@emotion/styled": "^11.11.0",
8 | "@mui/material": "^5.14.19",
9 | "@testing-library/jest-dom": "^5.17.0",
10 | "@testing-library/react": "^13.4.0",
11 | "@testing-library/user-event": "^13.5.0",
12 | "react": "^18.2.0",
13 | "react-dom": "^18.2.0",
14 | "react-router-dom": "^7.5.2",
15 | "react-scripts": "5.0.1",
16 | "web-vitals": "^2.1.4"
17 | },
18 | "scripts": {
19 | "start": "react-scripts start",
20 | "build": "react-scripts build",
21 | "test": "react-scripts test",
22 | "eject": "react-scripts eject"
23 | },
24 | "eslintConfig": {
25 | "extends": [
26 | "react-app",
27 | "react-app/jest"
28 | ]
29 | },
30 | "browserslist": {
31 | "production": [
32 | ">0.2%",
33 | "not dead",
34 | "not op_mini all"
35 | ],
36 | "development": [
37 | "last 1 chrome version",
38 | "last 1 firefox version",
39 | "last 1 safari version"
40 | ]
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/Tema_5/test-project/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## React Compiler
11 |
12 | The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13 |
14 | ## Expanding the ESLint configuration
15 |
16 | If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
17 |
--------------------------------------------------------------------------------
/Tema_4/Codigo de ejemplo/Use cases/Usabilidad y accesibilidad/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Dark mode
3 | * Obtenemos el elemento con el id darkSwitch.
4 | * Añadimos un evento change al elemento. Este evento es el mismo que onChange en HTML.
5 | */
6 | document.getElementById('darkSwitch').addEventListener('change', () => toggleDarkMode());
7 |
8 | /**
9 | * Text size
10 | * Obtenemos el elemento con el id textSize.
11 | * Añadimos un evento change al elemento. Este evento es el mismo que onChange en HTML.
12 | */
13 | document.getElementById('textSize').addEventListener('change', function() {
14 | modifyFontSize(this.value); // this.value es el valor del elemento que ha disparado el evento.
15 | });
16 |
17 |
18 | const toggleDarkMode = () => {
19 | document.body.classList.toggle('dark-mode'); // Añade o elimina la clase dark-mode de la lista de clases que se ecuentran en el body.
20 | }
21 |
22 | const modifyFontSize = (size) => {
23 | document.body.classList.remove('text-small', 'text-medium', 'text-large'); // Elimina las clases text-small, text-medium y text-large de la lista de clases que se ecuentran en el body.
24 | document.body.classList.add(size); // Añade la clase size a la lista de clases que se ecuentran en el body.
25 | }
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/unir-delivery-hooks-and-router/src/hooks/useRestaurants.js:
--------------------------------------------------------------------------------
1 | import {useEffect, useState} from "react";
2 |
3 | export const useRestaurants = () => {
4 |
5 | const [restaurants, setRestaurants] = useState([]);
6 | /**
7 | * Se hace uso de useEffect para definir un efecto de montaje que traerá la información de ingredientes
8 | * del back-end en el primer renderizado.
9 | */
10 | useEffect(() => {
11 | //fetch(process.env.REACT_APP_GW_URL).then((res) => res.json()).then((res) => setRestaurants(res));
12 |
13 | setTimeout(() => {
14 | setRestaurants([
15 | {id: "1", name: "Nueva Italiana", cuisine: "Italiana", rating: 4.5},
16 | {id: "2", name: "El Parterre", cuisine: "Española", rating: 4.9},
17 | {id: "3", name: "Rey Sushi", cuisine: "Japonés", rating: 4.2},
18 | {id: "4", name: "Dale taco", cuisine: "Mexicana", rating: 4.7},
19 | {id: "5", name: "Cookery", cuisine: "Americana", rating: 4.1},
20 | {id: "6", name: "Chumy Restaurante, donde Jose", cuisine: "Castiza", rating: 3.6},
21 | ]);
22 | }, 2500);
23 | }, []);
24 |
25 | return restaurants;
26 | }
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## React Compiler
11 |
12 | The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13 |
14 | ## Expanding the ESLint configuration
15 |
16 | If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
17 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## React Compiler
11 |
12 | The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13 |
14 | ## Expanding the ESLint configuration
15 |
16 | If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
17 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context-router/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
3 | import './App.css';
4 | import Header from './components/Header';
5 | import Footer from './components/Footer';
6 | import HomePage from './components/HomePage';
7 | import MovieDetails from './components/MovieDetails';
8 | import SeatSelection from './components/SeatSelection';
9 | import { GlobalProvider } from './context/GlobalContext';
10 | import { useMovies } from './hooks/useMovies';
11 |
12 | function AppContent() {
13 | const { darkMode } = useMovies();
14 |
15 | return (
16 |
27 | );
28 | }
29 |
30 | function App() {
31 | return (
32 |
33 |
34 |
35 |
36 |
37 | );
38 | }
39 |
40 | export default App;
41 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## React Compiler
11 |
12 | The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13 |
14 | ## Expanding the ESLint configuration
15 |
16 | If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # General
2 | logs
3 | *.NavData
4 |
5 | # Java class files.
6 | *.class
7 |
8 | # Mobile Tools for Java (J2ME).
9 | .mtj.tmp/
10 |
11 | # Package files.
12 | *.jar
13 | *.war
14 | *.ear
15 |
16 | # Virtual machine crash logs.
17 | hs_err_pid*
18 |
19 | # Eclipse IDE.
20 | .settings
21 | .metadata
22 | .project
23 | .classpath
24 | .buildpath
25 | Servers
26 | bin
27 |
28 | # Netbeans IDE.
29 | nbproject/private/
30 | build/
31 | nbbuild/
32 | dist/
33 | nbdist/
34 | nbactions.xml
35 | nb-configuration.xml
36 |
37 | # Intellij IDEA IDE.
38 | *.iml
39 | *.iws
40 | *.ipr
41 | .idea/
42 |
43 | # Maven build tools.
44 | target
45 | /target
46 | **/target
47 | /target/
48 | **/target/
49 |
50 | # Sprint Tools
51 | *.sts4-cache
52 | *.sts3-cache
53 | .attach_pid*
54 | /.DS_Store
55 | **/.DS_Store
56 |
57 | ### Local Redis config ###
58 | redisson.yaml
59 |
60 | # React
61 | # dependencies
62 | /node_modules
63 | **/node_modules
64 | /node_modules/
65 | **/node_modules/
66 | /.pnp
67 | .pnp.js
68 |
69 | # testing
70 | /coverage
71 |
72 | # production
73 | /build
74 |
75 | # misc
76 | .DS_Store
77 | .env.local
78 | .env.development.local
79 | .env.test.local
80 | .env.production.local
81 |
82 | npm-debug.log*
83 | yarn-debug.log*
84 | yarn-error.log*
85 | .vscode/launch.json
86 |
--------------------------------------------------------------------------------
/Tema_3/Readme.md:
--------------------------------------------------------------------------------
1 | Tema 3: JavaScript Avanzado
2 | =============================================
3 |
4 | El objetivo de estos ejercicios es seguir trabajando con JavaScript haciendo uso de API Fetch, promesas, callbacks, etc.
5 |
6 | ## Ejercicio 1: [**Promesas con JavaScript**](https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_3/Ejercicios/Chuck)
7 |
8 | Utilizando la API de chistes de Chuck Norris pondremos en práctica el uso de promesas en JavaScript.
9 |
10 | ## Ejercicio 2: [**Integración de HTML, CSS y JS**](https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_3/Ejercicios/Cinema)
11 |
12 | Continuamos con el ejercicio de la selección de butacas de un cine. Engancharemos los ficheros construidos hasta el momento y aseguraremos que todo funciona correctamente.
13 |
14 | ## Entrega
15 |
16 | Dentro del repositorio de ejercicios de tu clase (encontrarás el enlace en el Aula Virtual), crea una carpeta con tu nombre y apellidos dentro de ``Tema_3``. Deberás incluir dos carpetas llamadas ``chuck`` y ``cinema``.
17 | - Dentro de la primera carpeta incluirás únicamente los archivos ``index.html`` y ``styles.css``.
18 | - Dentro de la segunda carpeta incluirás únicamente los archivos ``index.html``, ``styles.css`` y ``cinema.js`` así como cualquier otro recurso adicional que consideres.
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context-router/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## React Compiler
11 |
12 | The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13 |
14 | ## Expanding the ESLint configuration
15 |
16 | If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
17 |
--------------------------------------------------------------------------------
/Tema_3/Codigo de ejemplo/02_00_EventLoop.js:
--------------------------------------------------------------------------------
1 | console.log("Inicio");
2 |
3 | // Se lanza una operación asíncrona: tras 2000 ms se ejecutará el callback.
4 | setTimeout(() => {
5 | console.log("Callback asíncrono");
6 | }, 2000);
7 |
8 | // Simulación de una tarea principal que se ejecuta periódicamente
9 | let contador = 0;
10 | const intervaloID = setInterval(() => {
11 | contador++;
12 | console.log(`Ejecutando tarea principal: Iteración ${contador}`);
13 |
14 | // Cuando hayamos hecho 5 iteraciones, detenemos el intervalo
15 | if (contador === 5) {
16 | clearInterval(intervaloID);
17 | console.log("Tarea principal finalizada");
18 | }
19 | }, 500);
20 |
21 | /*
22 | Flujo de ejecución:
23 | 1. Se imprime "Inicio".
24 | 2. Se programa el callback de setTimeout para que se ejecute en 2000 ms.
25 | 3. Se inicia el setInterval, que cada 500 ms imprime un mensaje.
26 | 4. Mientras el setInterval sigue imprimiendo, cuando pasan 2000 ms,
27 | el callback del setTimeout se coloca en la Callback Queue.
28 | 5. En cuanto el call stack se vacía (es decir, entre iteraciones o al finalizar la iteración actual),
29 | el Event Loop extrae el callback y lo ejecuta, imprimiendo "Callback asíncrono".
30 | 6. La tarea principal continúa hasta completarse.
31 | */
32 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './App.css';
3 | import Header from './components/Header';
4 | import Footer from './components/Footer';
5 | import CineSelector from './components/CineSelector';
6 | import Pelicula from './components/Pelicula';
7 | import { useMovies } from './hooks/useMovies';
8 |
9 | function App() {
10 | const {
11 | selectedCity,
12 | movies,
13 | loading,
14 | changeCity,
15 | getCurrentCityName,
16 | getCities
17 | } = useMovies();
18 |
19 | return (
20 |
21 |
22 |
23 |
24 |
30 |
31 | {loading ? (
32 |
33 | Cargando películas de {getCurrentCityName()}...
34 |
44 | );
45 | }
46 |
47 | export default App;
48 |
--------------------------------------------------------------------------------
/Tema_1/Codigo de ejemplo/HTML con CSS/styles.css:
--------------------------------------------------------------------------------
1 | .unir-text {
2 | font-family: monospace; /* Fuente. Mas Info https://developer.mozilla.org/en-US/docs/Web/CSS/font-family */
3 | }
4 |
5 | .unir-header {
6 | font-style: italic; /* Cursiva */
7 | }
8 |
9 | table {
10 | width: 100%;
11 | }
12 |
13 | td[estilo="impresionista"]:hover { /* Seleccionamos los td que tengan el atributo estilo con valor impresionista, cuando el raton pase por encima */
14 | background-color: grey;
15 | }
16 |
17 | td[estilo="cubista"]:hover {
18 | background-color: seagreen;
19 | }
20 |
21 | td[estilo="abstracto"]:hover {
22 | background-color: brown;
23 | }
24 |
25 | table, th, td { /* Aplicamos estilos a la tabla, a las celdas de cabecera y a las celdas de datos */
26 | border: 1px solid black;
27 | text-align: center;
28 | }
29 |
30 | td > img { /* Aplicamos estilos a las imagenes que esten dentro de una celda */
31 | max-width: 250px;
32 | max-height: 250px;
33 | }
34 |
35 | td[estilo="impresionista"] > img { /* Aplicamos estilos a las imagenes que esten dentro de una celda que tenga el atributo estilo con valor impresionista */
36 | border: 5px solid darkblue;
37 | }
38 |
39 | td[estilo="cubista"] > img {
40 | border: 5px solid darkmagenta;
41 | }
42 |
43 | td[estilo="abstracto"] > img {
44 | border: 5px solid darkorange;
45 | }
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook/src/data/moviesDataMadrid.js:
--------------------------------------------------------------------------------
1 | // Datos de películas para Madrid
2 | export const moviesDataMadrid = [
3 | {
4 | id: 4,
5 | title: "Spiderman: No Way Home",
6 | genre: "Acción",
7 | duration: "148 min",
8 | rating: "8.4/10",
9 | showtimes: ["16:30", "19:45", "22:30"],
10 | synopsis: "Peter Parker busca ayuda del Doctor Strange para que el mundo olvide que él es Spiderman, pero el hechizo sale mal y villanos de otros universos comienzan a aparecer."
11 | },
12 | {
13 | id: 5,
14 | title: "Doctor Strange 2",
15 | genre: "Fantasía",
16 | duration: "126 min",
17 | rating: "7.0/10",
18 | showtimes: ["15:00", "18:00", "21:30"],
19 | synopsis: "El Doctor Strange se adentra en el peligroso Multiverso Alternativo con la ayuda de nuevos aliados místicos y otros ya conocidos para enfrentarse a un nuevo y misterioso adversario."
20 | },
21 | {
22 | id: 6,
23 | title: "Thor: Love and Thunder",
24 | genre: "Acción",
25 | duration: "119 min",
26 | rating: "6.8/10",
27 | showtimes: ["16:45", "19:15", "22:00"],
28 | synopsis: "Thor se embarca en un viaje como nunca antes había hecho: una búsqueda de la paz interior. Pero su retiro se ve interrumpido por un asesino galáctico conocido como Gorr el Carnicero de Dioses."
29 | }
30 | ];
31 |
32 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context/src/data/moviesDataMadrid.js:
--------------------------------------------------------------------------------
1 | // Datos de películas para Madrid
2 | export const moviesDataMadrid = [
3 | {
4 | id: 4,
5 | title: "Spiderman: No Way Home",
6 | genre: "Acción",
7 | duration: "148 min",
8 | rating: "8.4/10",
9 | showtimes: ["16:30", "19:45", "22:30"],
10 | synopsis: "Peter Parker busca ayuda del Doctor Strange para que el mundo olvide que él es Spiderman, pero el hechizo sale mal y villanos de otros universos comienzan a aparecer."
11 | },
12 | {
13 | id: 5,
14 | title: "Doctor Strange 2",
15 | genre: "Fantasía",
16 | duration: "126 min",
17 | rating: "7.0/10",
18 | showtimes: ["15:00", "18:00", "21:30"],
19 | synopsis: "El Doctor Strange se adentra en el peligroso Multiverso Alternativo con la ayuda de nuevos aliados místicos y otros ya conocidos para enfrentarse a un nuevo y misterioso adversario."
20 | },
21 | {
22 | id: 6,
23 | title: "Thor: Love and Thunder",
24 | genre: "Acción",
25 | duration: "119 min",
26 | rating: "6.8/10",
27 | showtimes: ["16:45", "19:15", "22:00"],
28 | synopsis: "Thor se embarca en un viaje como nunca antes había hecho: una búsqueda de la paz interior. Pero su retiro se ve interrumpido por un asesino galáctico conocido como Gorr el Carnicero de Dioses."
29 | }
30 | ];
31 |
32 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook/src/data/moviesDataValencia.js:
--------------------------------------------------------------------------------
1 | // Datos de películas para Valencia
2 | export const moviesDataValencia = [
3 | {
4 | id: 7,
5 | title: "Jurassic World: Dominion",
6 | genre: "Aventura",
7 | duration: "147 min",
8 | rating: "7.1/10",
9 | showtimes: ["15:45", "18:30", "21:45"],
10 | synopsis: "Cuatro años después de la destrucción de Isla Nublar, los dinosaurios ahora viven y cazan junto a los humanos en todo el mundo. Este frágil equilibrio remodelará el futuro."
11 | },
12 | {
13 | id: 8,
14 | title: "Minions: The Rise of Gru",
15 | genre: "Animación",
16 | duration: "87 min",
17 | rating: "7.3/10",
18 | showtimes: ["16:00", "18:00", "20:00"],
19 | synopsis: "En los años 70, Gru crece siendo un gran fan de un grupo de supervillanos conocido como Vicious 6. Cuando los Vicious 6 despiden a su líder, Gru se presenta para unirse a ellos."
20 | },
21 | {
22 | id: 9,
23 | title: "Lightyear",
24 | genre: "Animación",
25 | duration: "105 min",
26 | rating: "7.2/10",
27 | showtimes: ["15:30", "17:30", "19:30"],
28 | synopsis: "La historia del origen definitiva de Buzz Lightyear, el héroe que inspiró el juguete, siguiendo al legendario Space Ranger después de que él y su comandante queden varados en un planeta hostil."
29 | }
30 | ];
31 |
32 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context/src/data/moviesDataValencia.js:
--------------------------------------------------------------------------------
1 | // Datos de películas para Valencia
2 | export const moviesDataValencia = [
3 | {
4 | id: 10,
5 | title: "Jurassic World: Dominion",
6 | genre: "Aventura",
7 | duration: "147 min",
8 | rating: "7.1/10",
9 | showtimes: ["15:45", "18:30", "21:45"],
10 | synopsis: "Cuatro años después de la destrucción de Isla Nublar, los dinosaurios ahora viven y cazan junto a los humanos en todo el mundo. Este frágil equilibrio remodelará el futuro."
11 | },
12 | {
13 | id: 11,
14 | title: "Minions: The Rise of Gru",
15 | genre: "Animación",
16 | duration: "87 min",
17 | rating: "7.3/10",
18 | showtimes: ["16:00", "18:00", "20:00"],
19 | synopsis: "En los años 70, Gru crece siendo un gran fan de un grupo de supervillanos conocido como Vicious 6. Cuando los Vicious 6 despiden a su líder, Gru se presenta para unirse a ellos."
20 | },
21 | {
22 | id: 12,
23 | title: "Lightyear",
24 | genre: "Animación",
25 | duration: "105 min",
26 | rating: "7.2/10",
27 | showtimes: ["15:30", "17:30", "19:30"],
28 | synopsis: "La historia del origen definitiva de Buzz Lightyear, el héroe que inspiró el juguete, siguiendo al legendario Space Ranger después de que él y su comandante queden varados en un planeta hostil."
29 | }
30 | ];
31 |
32 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context/src/data/moviesDataSevilla.js:
--------------------------------------------------------------------------------
1 | // Datos de películas para Sevilla
2 | export const moviesDataSevilla = [
3 | {
4 | id: 7,
5 | title: "Fast X",
6 | genre: "Acción",
7 | duration: "141 min",
8 | rating: "6.9/10",
9 | showtimes: ["16:15", "19:00", "22:15"],
10 | synopsis: "Dom Toretto y su familia se enfrentan a su adversario más letal: una amenaza emergente de las sombras del pasado que está alimentada por sed de venganza y está decidida a destrozar a esta familia."
11 | },
12 | {
13 | id: 8,
14 | title: "Transformers: El despertar de las bestias",
15 | genre: "Ciencia ficción",
16 | duration: "127 min",
17 | rating: "7.1/10",
18 | showtimes: ["15:45", "18:30", "21:45"],
19 | synopsis: "Los Autobots y Maximals se unen para luchar contra una nueva amenaza terrorista: los Terrorcons, liderados por Scourge, que buscan obtener una clave poderosa que podría destruir el universo."
20 | },
21 | {
22 | id: 9,
23 | title: "Indiana Jones 5",
24 | genre: "Aventura",
25 | duration: "154 min",
26 | rating: "7.5/10",
27 | showtimes: ["17:30", "20:30", "23:15"],
28 | synopsis: "El arqueólogo Indiana Jones se encuentra en una carrera contra el tiempo para recuperar un artefacto legendario que puede cambiar el curso de la historia."
29 | }
30 | ];
31 |
32 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/unir-delivery/src/views/Overview.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import '../styles/styles.css';
3 | import {Restaurant} from "../components/Restaurant";
4 | import {Header} from "../components/Header";
5 | import {Footer} from "../components/Footer";
6 |
7 | export const Overview = () => {
8 | const restaurants = [
9 | { name: "Nueva Italiana", cuisine: "Italiana", rating: 4.5 },
10 | { name: "El Parterre", cuisine: "Española", rating: 4.9 },
11 | { name: "Rey Sushi", cuisine: "Japonés", rating: 4.2 },
12 | { name: "Dale taco", cuisine: "Mexicana", rating: 4.7 },
13 | { name: "Cookery", cuisine: "Americana", rating: 4.1 },
14 | { name: "Chumy Restaurante, donde Jose", cuisine: "Castiza", rating: 3.6 },
15 | ];
16 |
17 | return (
18 |
33 | );
34 | }
--------------------------------------------------------------------------------
/Tema_3/Codigo de ejemplo/02_01_Promesas.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Las promesas son una forma distinta de llamar a funciones callback.
3 | * En ese sentido, no añaden ninguna funcionalidad especial, pero simplifican el proceso asíncrono.
4 | * Un objeto promesa espera hasta que termina una ejecución asíncrona.
5 | * La función puede devolver éxito o fracaso si la ejecución asíncrona falla.
6 | *
7 | * El objeto promesa espera dos funciones:
8 | * La función resolved
9 | * La función reject (opcional)
10 | *
11 | * Se usa then para asignar las funciones
12 | * Then devuelve una promesa, por lo que podemos encadenar promesas.
13 | *
14 | * Usamos setTimeout para ejecutar el codigo despues de X ms.
15 | */
16 |
17 | let numero = 0;
18 | let promesa1 = new Promise(function (resolve, reject) {
19 |
20 | setTimeout(function () {
21 | if (numero % 2 === 0) {
22 | resolve("Promesa terminada. Numero par");
23 | } else {
24 | reject("Promesa terminada. Numero impar");
25 | }
26 | }, 100);
27 | })
28 |
29 | const callbackResolve = (value) => console.log("OK " + value);
30 | const callbackReject = (value) => console.log("KO " + value);
31 |
32 | let resultado = promesa1.then(callbackResolve, callbackReject);
33 | console.log("haciendo cosas...");
34 | console.log("haciendo cosas...");
35 | console.log("haciendo cosas...");
36 |
37 | setTimeout(() => console.log(resultado), 500);
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook/src/data/moviesDataBarcelona.js:
--------------------------------------------------------------------------------
1 | // Datos de películas para Barcelona
2 | export const moviesDataBarcelona = [
3 | {
4 | id: 1,
5 | title: "Avatar: El camino del agua",
6 | genre: "Ciencia ficción",
7 | duration: "192 min",
8 | rating: "7.8/10",
9 | showtimes: ["16:00", "19:30", "22:45"],
10 | synopsis: "Jake Sully vive con su nueva familia formada en el planeta de Pandora. Una vez que una amenaza familiar regresa para terminar lo que se empezó anteriormente, Jake debe trabajar con Neytiri y el ejército de la raza Na'vi para proteger su planeta."
11 | },
12 | {
13 | id: 2,
14 | title: "Black Panther: Wakanda Forever",
15 | genre: "Acción",
16 | duration: "161 min",
17 | rating: "7.2/10",
18 | showtimes: ["15:30", "18:15", "21:00"],
19 | synopsis: "La reina Ramonda, Shuri, M'Baku, Okoye y las Dora Milaje luchan para proteger su nación de las potencias mundiales que intervienen tras la muerte del rey T'Challa."
20 | },
21 | {
22 | id: 3,
23 | title: "Top Gun: Maverick",
24 | genre: "Acción",
25 | duration: "130 min",
26 | rating: "8.5/10",
27 | showtimes: ["17:00", "20:00", "23:00"],
28 | synopsis: "Después de más de 30 años de servicio como uno de los mejores aviadores de la Armada, Pete 'Maverick' Mitchell está donde pertenece, empujando los límites como un valiente piloto de prueba."
29 | }
30 | ];
31 |
32 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context/src/data/moviesDataBarcelona.js:
--------------------------------------------------------------------------------
1 | // Datos de películas para Barcelona
2 | export const moviesDataBarcelona = [
3 | {
4 | id: 1,
5 | title: "Avatar: El camino del agua",
6 | genre: "Ciencia ficción",
7 | duration: "192 min",
8 | rating: "7.8/10",
9 | showtimes: ["16:00", "19:30", "22:45"],
10 | synopsis: "Jake Sully vive con su nueva familia formada en el planeta de Pandora. Una vez que una amenaza familiar regresa para terminar lo que se empezó anteriormente, Jake debe trabajar con Neytiri y el ejército de la raza Na'vi para proteger su planeta."
11 | },
12 | {
13 | id: 2,
14 | title: "Black Panther: Wakanda Forever",
15 | genre: "Acción",
16 | duration: "161 min",
17 | rating: "7.2/10",
18 | showtimes: ["15:30", "18:15", "21:00"],
19 | synopsis: "La reina Ramonda, Shuri, M'Baku, Okoye y las Dora Milaje luchan para proteger su nación de las potencias mundiales que intervienen tras la muerte del rey T'Challa."
20 | },
21 | {
22 | id: 3,
23 | title: "Top Gun: Maverick",
24 | genre: "Acción",
25 | duration: "130 min",
26 | rating: "8.5/10",
27 | showtimes: ["17:00", "20:00", "23:00"],
28 | synopsis: "Después de más de 30 años de servicio como uno de los mejores aviadores de la Armada, Pete 'Maverick' Mitchell está donde pertenece, empujando los límites como un valiente piloto de prueba."
29 | }
30 | ];
31 |
32 |
--------------------------------------------------------------------------------
/Tema_5/test-project/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | a {
17 | font-weight: 500;
18 | color: #646cff;
19 | text-decoration: inherit;
20 | }
21 | a:hover {
22 | color: #535bf2;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | display: flex;
28 | place-items: center;
29 | min-width: 320px;
30 | min-height: 100vh;
31 | }
32 |
33 | h1 {
34 | font-size: 3.2em;
35 | line-height: 1.1;
36 | }
37 |
38 | button {
39 | border-radius: 8px;
40 | border: 1px solid transparent;
41 | padding: 0.6em 1.2em;
42 | font-size: 1em;
43 | font-weight: 500;
44 | font-family: inherit;
45 | background-color: #1a1a1a;
46 | cursor: pointer;
47 | transition: border-color 0.25s;
48 | }
49 | button:hover {
50 | border-color: #646cff;
51 | }
52 | button:focus,
53 | button:focus-visible {
54 | outline: 4px auto -webkit-focus-ring-color;
55 | }
56 |
57 | @media (prefers-color-scheme: light) {
58 | :root {
59 | color: #213547;
60 | background-color: #ffffff;
61 | }
62 | a:hover {
63 | color: #747bff;
64 | }
65 | button {
66 | background-color: #f9f9f9;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/Tema_5/test-project/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Tema_3/Codigo de ejemplo/05_Integracion/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Polígonos en UNIR
5 |
6 |
7 |
8 |
9 |
Polígonos en UNIR
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Tema_2/Codigo de ejemplo/04_Bucles.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * Los bucles nos permiten recorrer estructuras y colecciones de datos, por ejemplo:
4 | * - arrays
5 | * - mapas
6 | * - strings (son arrays de caracteres)
7 | */
8 |
9 | let valor = 1;
10 | let numIteraciones = 0;
11 |
12 | while (valor < 100) { //condicion de iteracion - true o false
13 |
14 | //dentro del cuerpo del bucle podemos tener cualquier tipo de codigo
15 | console.log("valor: " + valor);
16 | valor = valor * 2; //Hacemos algo para actualizar la condicion de iteracion
17 | numIteraciones = numIteraciones + 1;
18 | }
19 | console.log(numIteraciones);
20 |
21 | let arrayNum = [1,2,3,4,5];
22 |
23 | //Definir indice de arranque, definir condicion de parada, definir condicion de avance
24 | for (let indice = 0; indice < arrayNum.length; indice++) {
25 | arrayNum[indice] *= 2;
26 | }
27 | console.log(arrayNum);
28 |
29 | //Obtener los numeros pares hasta 100
30 | //¿Como lo hariaomos con while y for?
31 |
32 | let arrayPares = [];
33 | let arrayImpares = [];
34 |
35 | let numeroActualWhile = 1;
36 |
37 | while(numeroActualWhile <= 100) {
38 | if(numeroActualWhile%2 === 0) {
39 | arrayPares.push(numeroActualWhile);
40 | }
41 | numeroActualWhile = numeroActualWhile +1;
42 | }
43 |
44 | for(let numeroActualFor = 1; numeroActualFor <= 100; numeroActualFor++) {
45 | if(numeroActualFor%2 !== 0) {
46 | arrayImpares.push(numeroActualFor);
47 | }
48 | }
49 |
50 | console.log(arrayPares);
51 | console.log(arrayImpares);
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Tema_5/Ejercicios/Cinema/Readme.md:
--------------------------------------------------------------------------------
1 | # Programación orientada a componentes con React
2 |
3 | ## 1. Objetivo
4 | El objetivo de este ejercicio es comenzar a familiarizarnos con React. Crearemos un nuevo proyecto que contendrá toda la implementación del FrontEnd de un cine.
5 | En algún momento, por supuesto, tendremos que incluir toda la lógica y diseño de gestión de butacas que ya hemos implementado hasta ahora.
6 |
7 | En este ejercicio nos centraremos en realizar una vista orientada a componentes.
8 |
9 | ## 2. Instrucciones
10 | Crearemos una vista para nuestro FrontEnd dentro de un archivo que puede llamarse ``movies.js``.
11 |
12 | - Crearemos un componente funcional ``Header`` que contendrá el banner que querremos mostrar en todas las páginas.
13 | - Crearemos un componente funcional ``Footer`` que contendrá el pie que querremos mostrar en todas las páginas.
14 | - Crearemos un componente funcional ``MovieList`` que contendrá la lista de películas que queremos mostrar en la página principal.
15 | - Crearemos un componente funcional ``Movie`` que contendrá la información de una película en concreto. A saber:
16 | - Título.
17 | - Imagen (de Internet o en local, lo que prefieras).
18 | - Sinopsis.
19 | - Duración.
20 | - Género.
21 | - Puntuación.
22 | - Botón para ir a la página de selección de asientos (botón sin efecto por el momento).
23 | - Las diferentes ocurrencias de ``Movie`` se generarán a partir de un array de objetos que contendrá la información de las películas en el componente ``MovieList``.
24 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context-router/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Tema_5/Readme.md:
--------------------------------------------------------------------------------
1 | Tema 5: React
2 | =============================================
3 |
4 | ## Repositorios con código de apoyo
5 |
6 | | Repositorio | Descripción | Otros
7 | |-----------|--|--|
8 | |🍕 [Unir-Pizza: Front-End](https://github.com/UnirCs/front-end-pizza) | Aplicación de pedidos de pizza. El Front-End está realizado con React. |
9 | |👨💼 [Unir-Employees: Front-End](https://github.com/UnirCs/front-end-facets) | Aplicación de búsqueda de personal. El Front-End está realizado con React. Conecta con una API encargada de obtener información de Elasticsearch |
10 |
11 |
12 | ## Ejercicio 1: [**JSX y Programación orientada a componentes**](https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_5/Ejercicios/Cinema)
13 |
14 | El objetivo de este ejercicio es adquirir los conocimientos básicos de React, como programación orientada a componentes y uso de JSX y Hooks.
15 | Realizaremos un ejercicio de programación orientada a componentes con React. Crearemos un nuevo proyecto que contendrá toda la implementación del FrontEnd de un cine.
16 |
17 | ## Entrega
18 |
19 | Dentro del repositorio de ejercicios de tu clase (encontrarás el enlace en el Aula Virtual), crea una carpeta con tu nombre y apellidos dentro de ``Tema_5``. Deberás incluir:
20 | - Todo el código del proyecto React desarrollado, a excepción de la subcarpeta ``node_modules``.
21 | - Un archivo de texto, ``urlVercel.txt`` con la URL del proyecto desplegado en Vercel. Recuerda que en la sección ``Recursos Audiovisuales`` del aula virtual dispones de un tutorial para desplegar tu proyecto en Vercel.
22 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/hooks-router-ejemplo/src/styles/geo.css:
--------------------------------------------------------------------------------
1 | .trapecio {
2 | width: 250px;
3 | height: 0px;
4 | border-right: 60px solid transparent;
5 | border-left: 60px solid transparent;
6 | border-bottom: 100px solid #428bca;
7 | margin-bottom: 20px;
8 | margin-top: 20px;}
9 |
10 | .rombo {
11 | width: 100px;
12 | height: 100px;
13 | border: 3px solid #555;
14 | background: #428bca;
15 | -webkit-transform: rotate(45deg);
16 | -moz-transform: rotate(45deg);
17 | -ms-transform: rotate(45deg);
18 | -o-transform: rotate(45deg);
19 | transform: rotate(45deg);
20 | margin-bottom: 20px;
21 | margin-top: 20px;
22 |
23 | }
24 |
25 | .cuadrado {
26 | width: 100px;
27 | height: 100px;
28 | border: 3px solid #555;
29 | background: #428bca;
30 | margin-bottom: 20px;
31 | margin-top: 20px;
32 | }
33 |
34 | .triangulo-equilatero {
35 | width: 0;
36 | height: 0;
37 | border-right: 100px solid transparent;
38 | border-top: 100px solid transparent;
39 | border-left: 100px solid transparent;
40 | border-bottom: 100px solid #f0ad4e;
41 | margin-bottom: 20px;
42 | margin-top: 20px;
43 | }
44 |
45 | .raro {
46 | width:0;
47 | height:0;
48 | border-right: 50px solid #d9534f;
49 | border-top: 50px solid #428bca;
50 | border-left: 50px solid #f0ad4e;
51 | border-bottom: 50px solid #5cb85c;
52 | -moz-border-radius: 100%;
53 | -webkit-border-radius: 100%;
54 | border-radius: 100%;
55 | margin-bottom: 20px;
56 | margin-top: 20px;
57 | }
--------------------------------------------------------------------------------
/Tema_2/Readme.md:
--------------------------------------------------------------------------------
1 | Tema 2: Introducción a JavaScript
2 | =============================================
3 |
4 | El objetivo de estos ejercicios es asimilar los conceptos básicos de JavaScript y comenzar a familiarizarse con el lenguaje.
5 |
6 | ## Ejercicio 1: [**Tratamiento de imágenes con JavaScript**](https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_2/Ejercicios/filtros)
7 |
8 | ¿Alguna vez has utilizado un filtro en una red social? ¿Sabes que las imágenes que subes están formadas por píxeles y que, mediante funciones matemáticas, se consiguen los fabulosos resultados que vemos en Instagram o Snapchat?
9 | Con este ejercicio vamos a aprender a tratar con los píxeles de las imágenes usando JavaScript.
10 |
11 | ## Ejercicio 2: [**Algoritmo de selección de butacas de un cine**](https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_2/Ejercicios/Cinema)
12 |
13 | Continuamos con el ejercicio de la selección de butacas de un cine. En este caso vamos a usar JavaScript para hacer una pre-selección de los asientos que un usuario puede elegir.
14 |
15 | **No se aceptan soluciones que violen las [invariantes](https://es.wikipedia.org/wiki/Ciclo_invariante) de un bucle**
16 |
17 | ## Entrega
18 |
19 | Dentro del repositorio de ejercicios de tu clase (encontrarás el enlace en el Aula Virtual), crea una carpeta con tu nombre y apellidos dentro de ``Tema_2``. Deberás incluir dos carpetas llamadas ``filtros`` y ``cinema``.
20 | - Dentro de la primera carpeta incluirás únicamente el archivo ``actividad.js`` modificado con tu código.
21 | - Dentro de la segunda carpeta incluirás únicamente un archivo llamado ``cinema.js``.
22 |
--------------------------------------------------------------------------------
/Tema_3/Codigo de ejemplo/05_Integracion/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | background-color: #f4f4f4;
4 | color: #333;
5 | text-align: center;
6 | }
7 |
8 | #polygons {
9 | display: flex; /* Crea un contenedor flexible */
10 | flex-wrap: wrap; /* Permite que los elementos se envuelvan en varias líneas */
11 | justify-content: space-around; /* Distribuye los elementos de forma equitativa */
12 | padding: 20px;
13 | }
14 |
15 | .polygon-container {
16 | display: flex;
17 | flex-direction: column;
18 | align-items: center;
19 | margin: 10px;
20 | flex-basis: calc(50% - 20px); /* 50% - 20px de margen */
21 | }
22 |
23 | .polygon {
24 | width: 70px;
25 | height: 70px;
26 | margin-bottom: 10px;
27 | background-color: #0056b3;
28 | }
29 |
30 | /* Polígonos individuales (triángulo, cuadrado, etc.) */
31 | .triangle {
32 | clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
33 | }
34 |
35 | .square {
36 | clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
37 | }
38 |
39 | .pentagon {
40 | clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
41 | }
42 |
43 | .hexagon {
44 | clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
45 | }
46 |
47 | .heptagon {
48 | clip-path: polygon(50% 0%, 90% 20%, 100% 75%, 60% 100%, 40% 100%, 0% 75%, 10% 20%);
49 | }
50 |
51 | button {
52 | background-color: #0056b3;
53 | color: white;
54 | border: none;
55 | padding: 10px 20px;
56 | cursor: pointer;
57 | }
58 |
59 | button:hover {
60 | background-color: #003d82;
61 | }
62 |
--------------------------------------------------------------------------------
/Tema_6/Ejercicios/Delivery/Readme.md:
--------------------------------------------------------------------------------
1 | ## API para Plataforma de Delivery de Comida
2 |
3 | ### Descripción
4 | Diseña una API REST para una plataforma de delivery de comida. La API debe gestionar la interacción entre usuarios, restaurantes y el sistema de pagos, permitiendo un flujo eficiente desde la búsqueda de restaurantes hasta la confirmación del pedido.
5 |
6 | ### Funcionalidades para Usuarios
7 | - **Exploración de restaurantes y menús:** Permitir la búsqueda de restaurantes por ubicación, tipo de cocina y otros filtros que consideres apropiados; visualizar menús con información detallada de cada plato. Los menus están asociados siempre a un restaurante. No se concibe, a nivel API, la consulta de un menú fuera de la consulta de un restaurante.
8 | - **Realización de pedidos:** Facilitar la creación de pedidos seleccionando platos del menú de un restaurante.
9 | - **Gestión de pedidos:** Permitir la cancelación o modificación de pedidos antes de su preparación o confirmación.
10 | - **Seguimiento de pedidos:** Proveer un sistema de seguimiento en tiempo real del estado del pedido.
11 | - **Registro de pagos:** Integrar la funcionalidad para registrar y gestionar el pago de los pedidos realizados.
12 |
13 | ### Funcionalidades para Restaurantes
14 | - **Gestión de menú:** Permitir a los restaurantes añadir, modificar y eliminar platos de su menú.
15 | - **Control de disponibilidad:** Actualizar el estado de cada plato (disponible o agotado) en función del stock y la demanda.
16 | - **Administración de pedidos:** Confirmar, preparar y actualizar el estado de los pedidos recibidos a través de la plataforma.
17 |
18 | ---
19 |
--------------------------------------------------------------------------------
/Tema_1/Ejercicios/Cinema/Readme.md:
--------------------------------------------------------------------------------
1 | Diseño de una ventana de selección de butacas de cine
2 | ==============================
3 |
4 |
5 | ## 1. Objetivo
6 |
7 | El objetivo de este ejercicio es diseñar la vista de reserva de butacas de salas del cine "UNIR-CINEMA". La página debe representar la pantalla de cine, la selección de butacas, un formulario para elegir el número de asientos y un footer con información del cine.
8 |
9 | - Debes usar HTML.
10 | - Debes usar CSS.
11 | - Puedes usar Bootstrap mediante CDN únicamente.
12 |
13 | ## 2. Instrucciones
14 |
15 | 1. Diseña una página web que incluya lo siguiente:
16 |
17 | - Una representación visual de la pantalla de cine.
18 | - Selección de butacas con números de fila y asientos ocupados/disponibles.
19 | - Un formulario que permita al cliente seleccionar el número de asientos deseados.
20 | - Un botón para confirmar la reserva de butacas.
21 | - Un footer con información del cine "UNIR-CINEMA", que incluya el nombre del cine, la dirección, el número de teléfono y la dirección de correo electrónico.
22 |
23 | 2. Utiliza HTML y CSS para crear el diseño. Puedes utilizar Bootstrap u otros frameworks CSS si lo deseas o crear tus propios estilos CSS personalizados.
24 |
25 | ## 3. Ejemplo
26 |
27 | Puedes tomar inspiración de diseños de salas de cine en línea, pero el objetivo es crear un diseño único y atractivo que represente al cine "UNIR-CINEMA".
28 |
29 | Aquí tienes un ejemplo de cómo podría ser el diseño (no es necesario que sea exactamente igual):
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/Tema_10/Readme.md:
--------------------------------------------------------------------------------
1 | # Tema 10: Usabilidad en la web y plataformas de pago
2 |
3 | ## Repositorios con código de apoyo
4 |
5 | | Repositorio | Descripción | Otros
6 | |-----------|--|--|
7 | |🍕 [Unir-Pizza: Front-End](https://github.com/UnirCs/front-end-pizza) | Aplicación de pedidos de pizza. El Front-End está realizado con React. |
8 | |🍕 [Unir-Pizza: Microservicio catálogo](https://github.com/UnirCs/back-end-pizza-catalogue) | Aplicación de pedidos de pizza.Este microservicio conecta con un clúster de Elasticsearch que contiene información sobre pizzas e ingredientes. Sirve la información a través de una API REST. |
9 | |🍕 [Unir-Pizza: Microservicio operador](https://github.com/UnirCs/back-end-pizza-orders) | Aplicación de pedidos de pizza.Este microservicio conecta con el microservicio catálogo para obtener información sin acceder directamente a esa base de información. Además, se encuentra conectado a una base de datos en memoria que registra los pedidos realizados. |
10 |
11 | ## Ejercicio 1: Creación de un test de usabilidad
12 |
13 | En esta actividad realizaremos un test de usabilidad para la aplicación que has construido en la primera actividad individual de la asignatura.
14 |
15 | El test, que debe basarse en los modelos presentados en clase, tratará de medir algunos aspectos de la usabilidad de la aplicación. Por tanto, debe contener referencias específicas a tu aplicación y acciones que las personas encuestadas deban realizar.
16 |
17 | ## Entrega
18 |
19 | Dentro del repositorio de ejercicios de tu clase (encontrarás el enlace en el Aula Virtual), crea una carpeta con tu nombre y apellidos dentro de ``Tema_10``. Deberás incluir:
20 | - PDF con el test de usabilidad construido.
21 |
--------------------------------------------------------------------------------
/Tema_2/Codigo de ejemplo/02_Objetos.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Podemos crear objetos de forma literal
4 | * Las propiedades pueden ser de cualquier tipo (basicos, objeto)
5 | *
6 | * Algunas propiedades pueden ser funciones o metodos y dentro de ellas podemos
7 | * usar this, que es una referencia al propio objeto.
8 | *
9 | * No podemos usar this en funciones flecha.
10 | */
11 | let jimmy = {
12 | nombre: "jimmy",
13 | tipo: "perro",
14 | raza: "Bulldog",
15 | edad: 3,
16 | sexo: "M",
17 | castrado: false,
18 |
19 | esSemental() {
20 | return "M" === this.sexo && !this.castrado;
21 | }
22 |
23 | }
24 | console.log(jimmy.nombre + " es un " + jimmy.tipo + " " + jimmy.raza + " de " + jimmy.edad + " años.");
25 | console.log(jimmy.esSemental() ? "Jimmy es semental": "Jimmy ya esta castrado");
26 |
27 |
28 | /**
29 | * Podemos declarar objetos a traves de clases, de forma similar a como se hace
30 | * en otros lenguajes de programacion
31 | *
32 | * JS Soporta herencia pero no herencia multiple
33 | */
34 | class Persona {
35 |
36 | constructor(n, e, p) {
37 | this.nombre = n;
38 | this.edad = e;
39 | this.peso = p;
40 | }
41 |
42 | birthday() {
43 | this.edad += 1;
44 | }
45 | }
46 |
47 | class Estudiante extends Persona {
48 |
49 | constructor(n, e, p, t) {
50 | super(n, e, p);
51 | this.titulacion = t;
52 | }
53 |
54 | estudiar() {
55 | return this.nombre + " estudia " + this.titulacion;
56 | }
57 | }
58 |
59 | let pepe = new Persona("Pepe", 17, 65);
60 | console.log(pepe);
61 |
62 | pepe = new Estudiante("Pepe", 17, 65, "MISSI");
63 | console.log(pepe);
64 | console.log(pepe.estudiar());
--------------------------------------------------------------------------------
/Tema_1/Codigo de ejemplo/HTML basico/htmlBasico.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | UNIR - HTML y CSS
5 |
6 |
7 |
Este elemento HTML se muestra con display block y esto es un elemento HTML inline
42 |
43 |
44 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context/src/hooks/useMovies.js:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | import { GlobalContext } from '../context/GlobalContext';
3 | import { moviesDataBarcelona } from '../data/moviesDataBarcelona';
4 | import { moviesDataMadrid } from '../data/moviesDataMadrid';
5 | import { moviesDataSevilla } from '../data/moviesDataSevilla';
6 | import { moviesDataValencia } from '../data/moviesDataValencia';
7 |
8 | // Custom hook que utiliza el contexto global y maneja las películas
9 | export const useMovies = () => {
10 | const { city, changeCity } = useContext(GlobalContext);
11 |
12 | const citiesData = {
13 | barcelona: {
14 | name: 'Barcelona',
15 | movies: moviesDataBarcelona
16 | },
17 | madrid: {
18 | name: 'Madrid',
19 | movies: moviesDataMadrid
20 | },
21 | sevilla: {
22 | name: 'Sevilla',
23 | movies: moviesDataSevilla
24 | },
25 | valencia: {
26 | name: 'Valencia',
27 | movies: moviesDataValencia
28 | }
29 | };
30 |
31 | const getCurrentMovies = () => {
32 | return citiesData[city]?.movies || [];
33 | };
34 |
35 | const getCurrentCityName = () => {
36 | return citiesData[city]?.name || '';
37 | };
38 |
39 | const getCities = () => {
40 | return Object.entries(citiesData).map(([key, cityData]) => ({
41 | key,
42 | name: cityData.name
43 | }));
44 | };
45 |
46 | const getMovieById = (id) => {
47 | const movies = getCurrentMovies();
48 | return movies.find(movie => movie.id === id);
49 | };
50 |
51 | return {
52 | // Estado del contexto
53 | city,
54 | // Funciones del contexto
55 | changeCity,
56 | // Datos de películas
57 | movies: getCurrentMovies(),
58 | getCurrentCityName,
59 | getCities,
60 | getMovieById,
61 | citiesData
62 | };
63 | };
64 |
--------------------------------------------------------------------------------
/Tema_6/Readme.md:
--------------------------------------------------------------------------------
1 | Tema 6: Introducción al Back-End
2 | =============================================
3 |
4 | El objetivo de estos ejercicios es practicar el diseño de APIs REST siguiendo los estándares de este estilo arquitectónico.
5 |
6 | La dificultad de cada ejercicio se indica con una escala de 1 a 5 estrellas, donde 1 es el nivel más bajo y 5 el más alto.
7 |
8 | ## Ejercicio 1 (⭐⭐️): [**API de Calculadora**](https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_6/Ejercicios/Calculadora)
9 |
10 | ## Ejercicio 2 (⭐⭐⭐): [**API del sistema de reserva de butacas de cine**](https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_6/Ejercicios/Cinema)
11 |
12 | ## Ejercicio 3 (⭐⭐⭐⭐): [**API del juego hunde la flota**](https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_6/Ejercicios/Hunde%20la%20flota)
13 |
14 | ## Entrega
15 |
16 | Dentro del repositorio de ejercicios de tu clase (encontrarás el enlace en el Aula Virtual), crea una carpeta con tu nombre y apellidos dentro de ``Tema_6``. Deberás incluir:
17 | - Por cada ejercicio, un archivo ``.md`` con el nombre del caso de uso (usando markdown) con una tabla como la siguiente, así como una lista de los recursos identificados y una breve descripción de cada uno de ellos:
18 |
19 | | Método HTTP | URI | Query Params | Request Body | Response Body | Códigos HTTP de respuesta |
20 | |-------------|----------------|--------------|--------------|------------------|-------------------------|
21 | | GET | /api/v1/movies | - | - | ``{"movies":[]}`` | 200 |
22 |
23 | Si lo necesitas, puedes obtener más información sobre la sintaxis de Markdown [aquí](https://pandao.github.io/editor.md/en.html), para formatear tu archivo .md
24 |
25 | Recuerda revisar la sesión de clase y el [ejemplo de la biblioteca](https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_6/Codigo%20de%20ejemplo/Biblioteca).
--------------------------------------------------------------------------------
/Tema_1/Ejercicios/CV/Readme.md:
--------------------------------------------------------------------------------
1 | Diseño de un Currículum Vítae Web
2 | ==============================
3 |
4 | ## 1. Objetivos
5 |
6 | El objetivo de este ejercicio es crear una página web que represente un CV de una persona utilizando HTML y CSS. La página estará centrada en mostrar información sobre ti, como tu foto de perfil, nombre, información de contacto, resumen, habilidades y experiencia laboral.
7 |
8 | - Estructura HTML básica.
9 | - Uso de etiquetas HTML como encabezados, párrafos y listas.
10 | - Aplicación de estilos CSS.
11 |
12 | ## 2. Instrucciones
13 |
14 | 1. Crea un archivo HTML llamado "index.html" y un archivo CSS llamado "styles.css".
15 |
16 | 2. En el archivo HTML, estructura la página de la siguiente manera:
17 |
18 | - Encabezado con tu nombre y una foto de perfil.
19 | - Sección de información de contacto que incluya el nombre, dirección de correo electrónico y número de teléfono (puedes inventar datos).
20 | - Sección de resumen que destaque los puntos clave sobre ti y tu experiencia.
21 | - Sección de habilidades que muestre una lista de tus habilidades más relevantes.
22 | - Sección de experiencia laboral (empresa, cargo y las fechas de empleo).
23 |
24 | 3. Utiliza CSS para aplicar estilos al perfil de usuario. Asegúrate de incluir:
25 |
26 | - Colores, tipografía y tamaños de fuente adecuados.
27 | - Espaciado y márgenes para crear un diseño limpio y legible.
28 | - Estilos para la foto de perfil, como un borde redondeado.
29 | - Estilos para resaltar el nombre y el encabezado del resumen.
30 |
31 | 4. Puedes utilizar imágenes de ejemplo o iconos para la foto de perfil y las habilidades.
32 |
33 | ## 3. Ejemplo
34 | Aquí tienes un ejemplo de cómo podría ser el diseño (no es necesario que sea exactamente igual):
35 |
36 |
37 |
--------------------------------------------------------------------------------
/Tema_2/Codigo de ejemplo/03_Condicionales.js:
--------------------------------------------------------------------------------
1 | //OPERACIONES CON BOOLEANOS BASICAS - AND Y OR
2 |
3 | let verdadero = true;
4 | let falso = false;
5 | console.log(verdadero && verdadero); //AND
6 | console.log(verdadero && falso);
7 | console.log(falso && verdadero);
8 | console.log(falso && falso);
9 |
10 | console.log(verdadero || verdadero); //OR
11 | console.log(verdadero || falso);
12 | console.log(falso || verdadero);
13 | console.log(falso || falso);
14 |
15 | /*
16 | 5 - APROBADO
17 | 6 - APROBADO
18 | 7, 8 - NOTABLE
19 | 9 - SOBRESALIENTE
20 | 10 - MH
21 | */
22 |
23 | let nota = 4;
24 | let resultado;
25 |
26 | if(nota <= 0 && nota <= 10) {
27 | if(nota < 5) {
28 | resultado = "SUSPENSO";
29 | } else {
30 |
31 | if(nota >= 5 && nota < 7) {
32 | resultado = "APROBADO";
33 | } else if(nota >= 7 && nota < 9) {
34 | resultado = "NOTABLE";
35 | } else if(nota >= 9 && nota < 10) {
36 | resultado = "SOBRESALIENTE";
37 | } else {
38 | resultado = "MH";
39 | }
40 | }
41 | } else {
42 | resultado = "NOTA INVALIDA";
43 | }
44 |
45 | let textoCorreo;
46 |
47 | if(resultado === "APROBADO" || resultado === "NOTABLE" ||resultado === "SOBRESALIENTE" ||resultado === "MH") {
48 | textoCorreo = "Enhorabuena has aprobado";
49 | } else {
50 | textoCorreo = "Hay que estudiar mas";
51 | }
52 |
53 | console.log("variable var: " + variableDentroDeBloque);
54 |
55 |
56 | if(resultado !== "SUSPENSO" || resultado !== "NOTA INVALIDA") {
57 |
58 | var variableDentroDeBloque = 5;
59 | textoCorreo = "Enhorabuena has aprobado";
60 | } else {
61 | textoCorreo = "Hay que estudiar mas";
62 | }
63 |
64 | console.log("variable var: " + variableDentroDeBloque);
65 | console.log(resultado);
66 |
67 | console.log("----")
68 | let dos = 2;
69 | let dosCadena = "2";
70 | console.log(dos === dosCadena);
71 | console.log(dos == dosCadena);
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/unir-delivery/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/hooks-router-ejemplo/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/unir-delivery-hooks-and-router/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/Tema_4/Codigo de ejemplo/Use cases/Usabilidad y accesibilidad/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | UNIR hoy - Modo Oscuro con Bootstrap
5 |
6 |
7 |
8 |
9 |
10 |
11 |
UNIR Hoy
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
27 |
28 |
29 |
30 |
31 |
Últimas Noticias
32 |
Entérate de las últimas noticias en las asignaturas de tu titulación...
33 |
34 |
35 |
36 |
Suscríbete
37 |
Suscríbete para recibir las últimas noticias en tu correo electrónico @comunidadunir.
38 |
39 |
40 |
41 |
42 |
43 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context-router/src/data/moviesDataValencia.js:
--------------------------------------------------------------------------------
1 | // Datos de películas para Valencia
2 | export const moviesDataValencia = [
3 | {
4 | id: 10,
5 | title: "Jurassic World: Dominion",
6 | genre: "Aventura",
7 | duration: "147 min",
8 | rating: "7.1/10",
9 | showtimes: ["15:45", "18:30", "21:45"],
10 | synopsis: "Cuatro años después de la destrucción de Isla Nublar, los dinosaurios ahora viven y cazan junto a los humanos en todo el mundo. Este frágil equilibrio remodelará el futuro.",
11 | image: "https://via.placeholder.com/300x400/228B22/ffffff?text=Jurassic",
12 | director: "Colin Trevorrow",
13 | cast: ["Chris Pratt", "Bryce Dallas Howard", "Laura Dern"],
14 | year: 2022
15 | },
16 | {
17 | id: 11,
18 | title: "Minions: The Rise of Gru",
19 | genre: "Animación",
20 | duration: "87 min",
21 | rating: "7.3/10",
22 | showtimes: ["16:00", "18:00", "20:00"],
23 | synopsis: "En los años 70, Gru crece siendo un gran fan de un grupo de supervillanos conocido como Vicious 6. Cuando los Vicious 6 despiden a su líder, Gru se presenta para unirse a ellos.",
24 | image: "https://via.placeholder.com/300x400/FFFF00/000000?text=Minions",
25 | director: "Kyle Balda",
26 | cast: ["Steve Carell", "Pierre Coffin", "Alan Arkin"],
27 | year: 2022
28 | },
29 | {
30 | id: 12,
31 | title: "Lightyear",
32 | genre: "Animación",
33 | duration: "105 min",
34 | rating: "7.2/10",
35 | showtimes: ["15:30", "17:30", "19:30"],
36 | synopsis: "La historia del origen definitiva de Buzz Lightyear, el héroe que inspiró el juguete, siguiendo al legendario Space Ranger después de que él y su comandante queden varados en un planeta hostil.",
37 | image: "https://via.placeholder.com/300x400/87CEEB/ffffff?text=Lightyear",
38 | director: "Angus MacLane",
39 | cast: ["Chris Evans", "Keke Palmer", "Peter Sohn"],
40 | year: 2022
41 | }
42 | ];
43 |
44 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context-router/src/data/moviesDataMadrid.js:
--------------------------------------------------------------------------------
1 | // Datos de películas para Madrid
2 | export const moviesDataMadrid = [
3 | {
4 | id: 4,
5 | title: "Spiderman: No Way Home",
6 | genre: "Acción",
7 | duration: "148 min",
8 | rating: "8.4/10",
9 | showtimes: ["16:30", "19:45", "22:30"],
10 | synopsis: "Peter Parker busca ayuda del Doctor Strange para que el mundo olvide que él es Spiderman, pero el hechizo sale mal y villanos de otros universos comienzan a aparecer.",
11 | image: "https://via.placeholder.com/300x400/FF0000/ffffff?text=Spiderman",
12 | director: "Jon Watts",
13 | cast: ["Tom Holland", "Zendaya", "Benedict Cumberbatch"],
14 | year: 2021
15 | },
16 | {
17 | id: 5,
18 | title: "Doctor Strange 2",
19 | genre: "Fantasía",
20 | duration: "126 min",
21 | rating: "7.0/10",
22 | showtimes: ["15:00", "18:00", "21:30"],
23 | synopsis: "El Doctor Strange se adentra en el peligroso Multiverso Alternativo con la ayuda de nuevos aliados místicos y otros ya conocidos para enfrentarse a un nuevo y misterioso adversario.",
24 | image: "https://via.placeholder.com/300x400/800080/ffffff?text=Dr+Strange",
25 | director: "Sam Raimi",
26 | cast: ["Benedict Cumberbatch", "Elizabeth Olsen", "Chiwetel Ejiofor"],
27 | year: 2022
28 | },
29 | {
30 | id: 6,
31 | title: "Thor: Love and Thunder",
32 | genre: "Acción",
33 | duration: "119 min",
34 | rating: "6.8/10",
35 | showtimes: ["16:45", "19:15", "22:00"],
36 | synopsis: "Thor se embarca en un viaje como nunca antes había hecho: una búsqueda de la paz interior. Pero su retiro se ve interrumpido por un asesino galáctico conocido como Gorr el Carnicero de Dioses.",
37 | image: "https://via.placeholder.com/300x400/FFD700/ffffff?text=Thor",
38 | director: "Taika Waititi",
39 | cast: ["Chris Hemsworth", "Natalie Portman", "Christian Bale"],
40 | year: 2022
41 | }
42 | ];
43 |
44 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context-router/src/data/moviesDataSevilla.js:
--------------------------------------------------------------------------------
1 | // Datos de películas para Sevilla
2 | export const moviesDataSevilla = [
3 | {
4 | id: 7,
5 | title: "Fast X",
6 | genre: "Acción",
7 | duration: "141 min",
8 | rating: "6.9/10",
9 | showtimes: ["16:15", "19:00", "22:15"],
10 | synopsis: "Dom Toretto y su familia se enfrentan a su adversario más letal: una amenaza emergente de las sombras del pasado que está alimentada por sed de venganza y está decidida a destrozar a esta familia.",
11 | image: "https://via.placeholder.com/300x400/FF4500/ffffff?text=Fast+X",
12 | director: "Louis Leterrier",
13 | cast: ["Vin Diesel", "Michelle Rodriguez", "Tyrese Gibson"],
14 | year: 2023
15 | },
16 | {
17 | id: 8,
18 | title: "Transformers: El despertar de las bestias",
19 | genre: "Ciencia ficción",
20 | duration: "127 min",
21 | rating: "7.1/10",
22 | showtimes: ["15:45", "18:30", "21:45"],
23 | synopsis: "Los Autobots y Maximals se unen para luchar contra una nueva amenaza terrorista: los Terrorcons, liderados por Scourge, que buscan obtener una clave poderosa que podría destruir el universo.",
24 | image: "https://via.placeholder.com/300x400/4169E1/ffffff?text=Transformers",
25 | director: "Steven Caple Jr.",
26 | cast: ["Anthony Ramos", "Dominique Fishback", "Peter Cullen"],
27 | year: 2023
28 | },
29 | {
30 | id: 9,
31 | title: "Indiana Jones 5",
32 | genre: "Aventura",
33 | duration: "154 min",
34 | rating: "7.5/10",
35 | showtimes: ["17:30", "20:30", "23:15"],
36 | synopsis: "El arqueólogo Indiana Jones se encuentra en una carrera contra el tiempo para recuperar un artefacto legendario que puede cambiar el curso de la historia.",
37 | image: "https://via.placeholder.com/300x400/8B4513/ffffff?text=Indiana+Jones",
38 | director: "James Mangold",
39 | cast: ["Harrison Ford", "Phoebe Waller-Bridge", "Antonio Banderas"],
40 | year: 2023
41 | }
42 | ];
43 |
44 |
--------------------------------------------------------------------------------
/Tema_4/Codigo de ejemplo/Basics/Selectors y Events/script.js:
--------------------------------------------------------------------------------
1 | window.onload = function () {
2 |
3 | //En este momento la pagina ha cargado completamente (HTML, CSS, imagenes...)
4 | alert("La pagina ha cargado.");
5 |
6 | //Obtenemos el primer elemento de tipo button y le añadimos texto y accion.
7 | let button = document.querySelector('button');
8 | button.innerHTML = "Hazme click";
9 | button.onclick = () => {
10 | button.innerHTML = "Desactivado";
11 | button.disabled = true;
12 | }
13 |
14 | //Creamos un nuevo elemento button y lo incluimos dentro de article
15 | let button2 = document.createElement('button');
16 | button2.innerHTML = "Boton 2";
17 | document.getElementById("articulo").appendChild(button2);
18 |
19 | //Eliminamos el primer parrafo
20 | document.getElementById("primerParrafo").remove();
21 |
22 |
23 | //Event bubbling: Eventos que se ven.
24 | //Se traera todos los elementos li que se tengan en el codigo.
25 | document.querySelectorAll("li").forEach(element => {
26 | element.addEventListener('click', () => {
27 | alert("Click en Li")
28 | })
29 | });
30 | //Se traera todos los elementos li que se tengan en el codigo.
31 |
32 | document.querySelectorAll("ul").forEach(element => {
33 | element.addEventListener('click', () => {
34 | alert("Click en Ul")
35 | })
36 | });
37 | //Se traera todos los elementos li que se tengan en el codigo.
38 |
39 | document.getElementById("articulo").addEventListener('click', (event) => {
40 | alert("Click en Article")
41 | event.stopPropagation();
42 | }
43 | );
44 | //Se traera todos los elementos li que se tengan en el codigo.
45 |
46 | document.body.addEventListener('click', () => {
47 | alert("Click en Body")
48 | }
49 | );
50 |
51 | //Mostramos todos los hijos del body
52 | console.log(document.body.childNodes);
53 | console.log(document.body.children);
54 |
55 | }
--------------------------------------------------------------------------------
/Tema_2/Codigo de ejemplo/05_Arrays.js:
--------------------------------------------------------------------------------
1 | /**
2 | Los arrays son listas de valores a los que podemos acceder con una unica variable
3 |
4 | Se trata de una estructura de datos que contiene N elementos indizados y accesibles mediante su indice
5 | */
6 |
7 | let arrayVacio = [];
8 | console.log(arrayVacio);
9 |
10 | let arrayConElementos = ["coche", "moto", "furgoneta"];
11 | let arrayNumerico = [1,7,-2,0];
12 | let arrayMixto = [1,7,"hola","adios"]; //Evitaremos este tipo de practicas ya que pueden ser propensas a error
13 |
14 | console.log(arrayConElementos);
15 | console.log(arrayMixto);
16 |
17 | //Podemos acceder a los diferentes elementos de un array utilizando el indice de cada elemento
18 | //SIEMPRE se empieza por 0 en informatica
19 | console.log(arrayConElementos[0]);
20 | console.log(arrayConElementos[1]);
21 | let furgoneta = arrayConElementos[2];
22 |
23 | console.log(arrayConElementos[3]);
24 | let inexistente = arrayConElementos[3];
25 | console.log(inexistente);
26 |
27 | //Un array (como cualquier coleccion) tiene un tamaño que usaremos para hacer operaciones - length
28 | let size = arrayConElementos.length;
29 | console.log(size);
30 | console.log(arrayVacio.length);
31 | //Podemos usar length para acceder a elementos por el final del array
32 | console.log(arrayConElementos[arrayConElementos.length-1]);
33 |
34 | //Podemos reasignar valores
35 | arrayConElementos[arrayConElementos.length-2] = "tractor";
36 | console.log(arrayConElementos);
37 |
38 | //Podemos añadir elementos
39 | arrayConElementos.push("moto");
40 | console.log(arrayConElementos);
41 |
42 | //Podemos eliminar el ultimo elemento
43 | arrayConElementos.pop();
44 | console.log(arrayConElementos);
45 |
46 | //Si contienen texto, podemos ordenarlos
47 | arrayConElementos.sort();
48 | console.log(arrayConElementos);
49 |
50 | arrayNumerico.sort();
51 | console.log(arrayNumerico);
52 |
53 | //Recorrer arrays usando bucles
54 | for(let indice = 0; indice < arrayConElementos.length; indice++) {
55 | console.log("elemento " + indice + " es " + arrayConElementos[indice]);
56 | }
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook/src/hooks/useMovies.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { moviesDataBarcelona } from '../data/moviesDataBarcelona';
3 | import { moviesDataMadrid } from '../data/moviesDataMadrid';
4 | import { moviesDataValencia } from '../data/moviesDataValencia';
5 |
6 | // Custom hook para gestionar las películas y ciudades
7 | export const useMovies = () => {
8 | const [selectedCity, setSelectedCity] = useState('barcelona');
9 | const [movies, setMovies] = useState([]);
10 | const [loading, setLoading] = useState(false);
11 |
12 | const citiesData = {
13 | barcelona: {
14 | name: 'Barcelona',
15 | movies: moviesDataBarcelona
16 | },
17 | madrid: {
18 | name: 'Madrid',
19 | movies: moviesDataMadrid
20 | },
21 | valencia: {
22 | name: 'Valencia',
23 | movies: moviesDataValencia
24 | }
25 | };
26 |
27 | // Simular carga de datos cuando cambia la ciudad
28 | useEffect(() => {
29 | setLoading(true);
30 |
31 | // Simular una pequeña demora para mostrar el estado de loading
32 | const timer = setTimeout(() => {
33 | setMovies(citiesData[selectedCity].movies);
34 | setLoading(false);
35 | }, 300);
36 |
37 | return () => clearTimeout(timer);
38 | }, [selectedCity]);
39 |
40 | const changeCity = (cityKey) => {
41 | if (citiesData[cityKey]) {
42 | setSelectedCity(cityKey);
43 | }
44 | };
45 |
46 | const getCurrentCityName = () => {
47 | return citiesData[selectedCity]?.name || '';
48 | };
49 |
50 | const getCities = () => {
51 | return Object.entries(citiesData).map(([key, city]) => ({
52 | key,
53 | name: city.name
54 | }));
55 | };
56 |
57 | const getMovieById = (id) => {
58 | return movies.find(movie => movie.id === id);
59 | };
60 |
61 | return {
62 | selectedCity,
63 | movies,
64 | loading,
65 | changeCity,
66 | getCurrentCityName,
67 | getCities,
68 | getMovieById,
69 | citiesData
70 | };
71 | };
72 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite-custom-hook-context-router/src/data/moviesDataBarcelona.js:
--------------------------------------------------------------------------------
1 | // Datos de películas para Barcelona
2 | export const moviesDataBarcelona = [
3 | {
4 | id: 1,
5 | title: "Avatar: El camino del agua",
6 | genre: "Ciencia ficción",
7 | duration: "192 min",
8 | rating: "7.8/10",
9 | showtimes: ["16:00", "19:30", "22:45"],
10 | synopsis: "Jake Sully vive con su nueva familia formada en el planeta de Pandora. Una vez que una amenaza familiar regresa para terminar lo que se empezó anteriormente, Jake debe trabajar con Neytiri y el ejército de la raza Na'vi para proteger su planeta.",
11 | image: "https://via.placeholder.com/300x400/0066cc/ffffff?text=Avatar+2",
12 | director: "James Cameron",
13 | cast: ["Sam Worthington", "Zoe Saldana", "Sigourney Weaver"],
14 | year: 2022
15 | },
16 | {
17 | id: 2,
18 | title: "Black Panther: Wakanda Forever",
19 | genre: "Acción",
20 | duration: "161 min",
21 | rating: "7.2/10",
22 | showtimes: ["15:30", "18:15", "21:00"],
23 | synopsis: "La reina Ramonda, Shuri, M'Baku, Okoye y las Dora Milaje luchan para proteger su nación de las potencias mundiales que intervienen tras la muerte del rey T'Challa.",
24 | image: "https://via.placeholder.com/300x400/8B4513/ffffff?text=Black+Panther+2",
25 | director: "Ryan Coogler",
26 | cast: ["Letitia Wright", "Angela Bassett", "Lupita Nyong'o"],
27 | year: 2022
28 | },
29 | {
30 | id: 3,
31 | title: "Top Gun: Maverick",
32 | genre: "Acción",
33 | duration: "130 min",
34 | rating: "8.5/10",
35 | showtimes: ["17:00", "20:00", "23:00"],
36 | synopsis: "Después de más de 30 años de servicio como uno de los mejores aviadores de la Armada, Pete 'Maverick' Mitchell está donde pertenece, empujando los límites como un valiente piloto de prueba.",
37 | image: "https://via.placeholder.com/300x400/FF6347/ffffff?text=Top+Gun",
38 | director: "Joseph Kosinski",
39 | cast: ["Tom Cruise", "Miles Teller", "Jennifer Connelly"],
40 | year: 2022
41 | }
42 | ];
43 |
44 |
--------------------------------------------------------------------------------
/Tema_1/Codigo de ejemplo/HTML con CSS/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | UNIR - HTML y CSS
6 |
7 |
8 |
9 |
10 |
11 |
Galería artística
12 |
13 |
Ejemplo para ilustrar HTML con CSS
14 |
15 |
Obras de arte
16 |
17 |
18 |
19 |
Impresionismo
20 |
Cubismo
21 |
Renacentismo
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/Tema_1/Readme.md:
--------------------------------------------------------------------------------
1 | Tema 1: Introducción al Front-End. HTML y CSS
2 | =============================================
3 |
4 | El objetivo de estos ejercicios es introducirnos en los lenguajes HTML y CSS.
5 |
6 | ## Ejercicio 1: [**Desarrollo de un CV Online con HTML y CSS**](https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_1/Ejercicios/CV)
7 |
8 | Este ejercicio consiste en crear la versión onlince de un CV (puede ser tuyo o inventado) haciendo uso únicamente de HTML y CSS. No se utilizará aquí ninguna otra librería. HTML y CSS puro.
9 |
10 | ## Ejercicio 2: [**Desarrollo de una ventana de selección de butacas para un cine**](https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_1/Ejercicios/Cinema)
11 |
12 | Utilizando la librería Twitter Bootstrap, en este ejercicio hay que desarrollar la ventana de selección de butacas de un cine. No es necesario que sea dinámica. Simplemente se pide la estructura HTML y código CSS. Nada de JavaScript por el momento.
13 |
14 |
15 | ## Entrega
16 |
17 | Dentro del repositorio de ejercicios de tu clase (encontrarás el enlace en el Aula Virtual), crea una carpeta con tu nombre y apellidos dentro de ``Tema_1``. Deberás incluir dos carpetas llamadas ``cinema`` y ``cv``. Dentro de las carpetas deberá haber dos ficheros. ``index.html`` con el código html y ``styles.css`` con el código CSS.
18 |
19 | En ambos casos se incluyen ejemplos a seguir para realizar los ejercicios. Si lo deseas puedes optar por realizar diseños totalmente originales y no seguir los ejemplos.
20 |
21 | Recuerda que, para usar la librería Twitter Bootstrap tendremos que incluir la siguiente declaración dentro del elemento ````:
22 | ```
23 |
24 | ```
25 | También incluiremos el siguiente script antes de finalizar el ````:
26 | ```
27 |
28 | ```
29 |
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/CON_VITE/unir-cinema-vite/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React, {useState, useEffect} from 'react';
2 | import './App.css';
3 | import Header from './components/Header';
4 | import Footer from './components/Footer';
5 | import CineSelector from './components/CineSelector';
6 | import Pelicula from './components/Pelicula';
7 | import {citiesData} from './data/moviesData';
8 |
9 | function App() {
10 |
11 | const [selectedCity, setSelectedCity] = useState('barcelona');
12 |
13 |
14 | const [movies, setMovies] = useState([]);
15 | const [isLoading, setIsLoading] = useState(true);
16 |
17 | /** Función para cargar las películas con un retardo simulado */
18 | const loadMovies = async () => {
19 | setIsLoading(true);
20 |
21 | // Simular retardo de 2 segundos
22 | await new Promise((resolve) => setTimeout(resolve, 2000));
23 |
24 | // Cargar las películas de la ciudad seleccionada
25 | const currentCityData = citiesData[selectedCity];
26 | setMovies(currentCityData.movies);
27 | setIsLoading(false);
28 | };
29 |
30 | // Simular carga de películas con retraso
31 | useEffect(() => {
32 | loadMovies();
33 | }, [selectedCity]); // Se ejecuta cuando cambia la ciudad seleccionada
34 |
35 | const handleCityChange = (cityKey) => {
36 | setSelectedCity(cityKey);
37 | };
38 |
39 | return (
40 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/Repaso_BBDD/Readme.md:
--------------------------------------------------------------------------------
1 | Instalación de SGBD Relacionales con Docker y consultas con SQL
2 | ==============================================================
3 |
4 | Trabajaremos con MySQL (versión latest).
5 |
6 | ## 1. Requisitos previos
7 |
8 | 1. Debes [descargar Docker Desktop](https://www.docker.com/products/docker-desktop/) que incluye de por sí la instalación de Docker Engine (en el caso de Linux hay que descargar el engine por separado).
9 | 2. Debes disponer de algún programa que permita visualizar bases de datos. Durante el curso utilizaremos [JetBrains DataGrip](https://www.jetbrains.com/es-es/datagrip/), uno de los mejores IDEs profesionales para trabajar con bases de datos.
10 |
11 | ## 2. Instalación de MySQL
12 |
13 | Sigue las instrucciones que encontrarás [aquí](https://github.com/UnirCs/DWFS-PER9208-2324/blob/master/Tema_0_Repaso/00_Resources/Readme.md).
14 |
15 | ## 3. Consultas sobre MySQL
16 |
17 | Realiza [este tutorial de W3Schools](https://www.w3schools.com/sql/) para aprender los conceptos básicos del lenguaje SQL.
18 |
19 | Utilizando DataGrip, ejecuta las siguientes consultas SQL en la base de datos ``employees`` de MySQL:
20 | 1. Obtener el número de hombres y mujeres de la base de datos. Ordenar de forma descendente.
21 | 2. Mostrar el nombre, apellido y salario de la persona mejor pagada de un departamento concreto (parámetro variable).
22 | 3. Mostrar el nombre, apellido y salario de la segunda persona mejor pagada de un departamento concreto (parámetro variable).
23 | 4. Mostrar el número de empleados contratados en un mes concreto (parámetro variable).
24 |
25 | ## 4. ¿Te has quedado con ganas de más?
26 |
27 | En la segunda actividad de la asignatura haremos uso de una base de datos relacional para almacenar información.
28 |
29 | Piensa en la aplicación que has desarrollado en la actividad individual. ¿Qué tablas y relaciones entre tablas necesitarías? Párate a pensarlo y diseña el modelo entidad relación o el modelo lógico que utilizarías. Como pista, necesitarás al menos dos tablas. Una para alojar la información del elemento característico de tu aplicación (libros, películas...) y otra para alojar la información de las operaciones que se realizan sobre dichos elementos (alquileres, compras...). ¿Qué atributos crees que debería tener cada tabla? ¿De qué forma se relacionarían?
30 |
31 | Ánimo!
32 |
--------------------------------------------------------------------------------
/Tema_3/Codigo de ejemplo/01_OrdSuperior.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Las funciones de orden superior son aquellas que se ejecutan sobre
4 | * colecciones de elementos (arrays, mapas, sets...)
5 | */
6 | let islas = ["Canarias", "Baleares", "Corcega", "Cerdeña"];
7 |
8 | /**
9 | * Metodo forEach (callback) - Recorrer elementos
10 | * Mas Info: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
11 | * El metodo tiene uno o dos parametros
12 | * Elemento de la coleccion
13 | * Indice para poder recorrerlo (opcional, undefined si no se indica)
14 | */
15 | islas.forEach(element => console.log(element));
16 | islas.forEach((element, index) => {console.log(element + " index " + index)});
17 |
18 |
19 | /**
20 | * Metodo map (callback) - Modificar elementos
21 | * Mas Info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
22 | * El metodo tiene un parametro
23 | * Funcion a aplicar sobre cada elemento de la coleccion
24 | */
25 | let numbers = [1, 5, 10, 15];
26 | let doubles = numbers.map(x => x * 2);
27 | doubles.forEach((element, index) => {console.log(element + " index " + index)});
28 |
29 |
30 | /**
31 | * Metodo filter (callback) - Filtrar elementos
32 | * Mas Info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
33 | * El metodo tiene un parametro
34 | * Funcion a evaluar sobre cada elemento. Se eliminan los elementos que no cumplen el filtro
35 | */
36 | let palabras = ["spray", "saludo", "tetera", "jarron", "destruccion", "selva"];
37 | let palabrasFilt = palabras.filter(word => word.length > 5);
38 | palabrasFilt.forEach((element, index) => {console.log(element + " index " + index)});
39 |
40 |
41 | /**
42 | * Metodo reduce (callback) - Reducir Arrays
43 | * Mas Info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
44 | * El metodo tiene un parametro callback compuesto por:
45 | * Funcion reductora. Dos argumentos
46 | * Acumulador
47 | * Valor actual
48 | * Estado inicial del acumulador, opcional. Si no se indica seria el valor default del tipo de dato.
49 | */
50 | const array = [1,2,3,4];
51 |
52 | const funcReductora = (acumulador, valorActual) => acumulador + valorActual;
53 |
54 | console.log(array.reduce(funcReductora));
55 | console.log(array.reduce(funcReductora, 3));
--------------------------------------------------------------------------------
/Tema_3/Ejercicios/Cinema/Readme.md:
--------------------------------------------------------------------------------
1 | # Integración de HTML, CSS y JS
2 |
3 | ## 1. Objetivo
4 | En este caso vamos a "enganchar" el fichero HTML que definía nuestra sala del cine con el Script que desarrollamos en el tema 2.
5 | Dependiendo de cada implementación, es posible que haya que hacer cambios en uno o en ambos ficheros.
6 |
7 | En el próximo tema veremos cómo hacer esto mismo de una forma más elegante que no implique alterar el código HTML.
8 |
9 | ## 2. Instrucciones
10 | El objetivo es que cuando se introduzca un nuevo número de butacas a reservar se muestre **en la consola del navegador** el resultado de ejecutar la función ``suggest`` que ya programamos, **asumiendo que la sala está totalmente vacía**. Siempre deberían aparecer en el Set resultado las butacas de la última fila, o vacío.
11 |
12 | Para ello, debemos:
13 | - En el fichero ``index.html`` que desarrollamos en el tema 1, incluir la referencia al script ``cinema.js`` que desarrollamos en el tema 2. ¿Es la presencia de este script crítica para la carga de la página? ¿Debe estar dentro de ``head`` o al final de ``body``?
14 | - Debes hacer una llamada a la función **únicamente a modo de prueba**, por ejemplo, ``suggest(8)`` desde el HTML. La propia función debe tener un log que muestre el Set que se está devolviendo antes de terminar su ejecución. En el próximo tema haremos que esta llamada use un parámetro dinámico. Por ahora la invocación quedará fija.
15 | - La función debe ejecutarse cuando el contenido del ``input`` cambie. Para ello, debes usar:
16 | - El evento ``onInput`` del ``input`` en el archivo HTML. [Aquí tienes más información sobre este evento.](https://www.w3schools.com/jsref/event_oninput.asp) Si bien podrían haberse usado otros eventos como ``onChange``, en este caso este evento es el más adecuado. Puedes probar las diferencias entre ambos si quieres.
17 |
18 | En el siguiente tema veremos también herramientas para cambiar el estilo visual de las butacas una vez hayan sido seleccionadas.
19 |
20 | ## 3. Ejemplo de resultado
21 |
22 | (Ten en cuenta que los resultados que se muestran en la consola en estos ejemplos corresponden a una matriz de 10x10, tal como se daba en el código de apoyo del Tema 2. Lo que se busca es ver que la conexión entre el archivo HTML y el JS funciona correctamente).
23 |
24 | **Estado inicial:**
25 |
26 | 
27 |
28 | **Cambiamos contenido del input 1 vez:**
29 |
30 | 
31 |
32 | **Cambiamos contenido del input otra vez y sucesivas... :**
33 |
34 | 
--------------------------------------------------------------------------------
/Tema_6/Ejercicios/Hunde la flota/Readme.md:
--------------------------------------------------------------------------------
1 | # API del juego hunde la flota
2 |
3 | En este ejercicio vamos a diseñar la API REST que podría usar la App del juego 'Hundir la flota' o 'Juego de los barcos'.
4 | Si no conoces este juego puedes echar un vistazo al PDF de instrucciones que se encuentra en esta misma ruta, o descarga una App existente para jugar una partida. La aplicación gestionará principalmente partidas entre usuarios registrados o invitados (es decir, sin registro, anónimos). Cada partida tiene asociadas dos cuadrículas de 10x10 cuadrados, una por cada jugador, y estos jugadores deben poner sobre dicha cuadrícula las localizaciones de sus barcos. Tal como se indica en las instrucciones, deberá haber:
5 | - 1 barco de 4 cuadrados.
6 | - 2 barcos de 3 cuadrados.
7 | - 3 barcos de 2 cuadrados.
8 | - 4 barcos de 1 cuadrado.
9 |
10 | También es necesario que, como dicen las instrucciones, se respeten dos reglas:
11 | - Los barcos se colocan enteramente en horizontal o enteramente en vertical, es decir, no puede haber un barco en forma de L.
12 | - Siempre debe haber un cuadrado de distancia entre cualquier punto de cualquier barco, y se pueden pegar al borde de la cuadrícula.
13 |
14 | El objetivo del ejercicio es diseñar una API REST que será implementada (en otros ejercicios) por un microservicio o aplicación que se encargará de tratar todos los datos de las diferentes partidas. En este ejercicio nos centraremos únicamente en el diseño de la API y no trataremos ningún detalle de la implementación.
15 |
16 | Las operaciones que la API debe soportar son las siguientes:
17 | - Crear una partida.
18 | - Eliminar una partida.
19 | - Modificar datos de una partida.
20 | - Iniciar una partida.
21 | - Finalizar una partida.
22 | - Consultar todos los datos (jugadores asociados, barcos de cada jugador, disparos realizados, ganador...) de una partida.
23 | - Añadir un barco a la cuadrícula de un jugador en una partida.
24 | - Eliminar un barco de la cuadrícula de un jugador en una partida.
25 | - Consultar todos los barcos de un jugador de una partida.
26 | - Registrar un disparo de un jugador a otro en una partida.
27 | - Crear un usuario.
28 | - Obtener datos de un usuario.
29 | - Eliminar un usuario.
30 |
31 | Ten en cuenta que podría no ser necesario definir un endpoint por cada una de las operaciones que se han listado. No obstante, dichas operaciones deben ser satisfechas por la API diseñada. Las primeras preguntas que deberás hacerte son:
32 | - ¿Qué recursos tiene que manejar la API?
33 | - ¿Cómo se relacionan entre sí?
34 | - ¿Qué información (atributos) guarda cada recurso?
--------------------------------------------------------------------------------
32 |
33 |
34 |
--------------------------------------------------------------------------------
/Tema_10/Readme.md:
--------------------------------------------------------------------------------
1 | # Tema 10: Usabilidad en la web y plataformas de pago
2 |
3 | ## Repositorios con código de apoyo
4 |
5 | | Repositorio | Descripción | Otros
6 | |-----------|--|--|
7 | |🍕 [Unir-Pizza: Front-End](https://github.com/UnirCs/front-end-pizza) | Aplicación de pedidos de pizza. El Front-End está realizado con React. |
8 | |🍕 [Unir-Pizza: Microservicio catálogo](https://github.com/UnirCs/back-end-pizza-catalogue) | Aplicación de pedidos de pizza.Este microservicio conecta con un clúster de Elasticsearch que contiene información sobre pizzas e ingredientes. Sirve la información a través de una API REST. |
9 | |🍕 [Unir-Pizza: Microservicio operador](https://github.com/UnirCs/back-end-pizza-orders) | Aplicación de pedidos de pizza.Este microservicio conecta con el microservicio catálogo para obtener información sin acceder directamente a esa base de información. Además, se encuentra conectado a una base de datos en memoria que registra los pedidos realizados. |
10 |
11 | ## Ejercicio 1: Creación de un test de usabilidad
12 |
13 | En esta actividad realizaremos un test de usabilidad para la aplicación que has construido en la primera actividad individual de la asignatura.
14 |
15 | El test, que debe basarse en los modelos presentados en clase, tratará de medir algunos aspectos de la usabilidad de la aplicación. Por tanto, debe contener referencias específicas a tu aplicación y acciones que las personas encuestadas deban realizar.
16 |
17 | ## Entrega
18 |
19 | Dentro del repositorio de ejercicios de tu clase (encontrarás el enlace en el Aula Virtual), crea una carpeta con tu nombre y apellidos dentro de ``Tema_10``. Deberás incluir:
20 | - PDF con el test de usabilidad construido.
21 |
--------------------------------------------------------------------------------
/Tema_2/Codigo de ejemplo/02_Objetos.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Podemos crear objetos de forma literal
4 | * Las propiedades pueden ser de cualquier tipo (basicos, objeto)
5 | *
6 | * Algunas propiedades pueden ser funciones o metodos y dentro de ellas podemos
7 | * usar this, que es una referencia al propio objeto.
8 | *
9 | * No podemos usar this en funciones flecha.
10 | */
11 | let jimmy = {
12 | nombre: "jimmy",
13 | tipo: "perro",
14 | raza: "Bulldog",
15 | edad: 3,
16 | sexo: "M",
17 | castrado: false,
18 |
19 | esSemental() {
20 | return "M" === this.sexo && !this.castrado;
21 | }
22 |
23 | }
24 | console.log(jimmy.nombre + " es un " + jimmy.tipo + " " + jimmy.raza + " de " + jimmy.edad + " años.");
25 | console.log(jimmy.esSemental() ? "Jimmy es semental": "Jimmy ya esta castrado");
26 |
27 |
28 | /**
29 | * Podemos declarar objetos a traves de clases, de forma similar a como se hace
30 | * en otros lenguajes de programacion
31 | *
32 | * JS Soporta herencia pero no herencia multiple
33 | */
34 | class Persona {
35 |
36 | constructor(n, e, p) {
37 | this.nombre = n;
38 | this.edad = e;
39 | this.peso = p;
40 | }
41 |
42 | birthday() {
43 | this.edad += 1;
44 | }
45 | }
46 |
47 | class Estudiante extends Persona {
48 |
49 | constructor(n, e, p, t) {
50 | super(n, e, p);
51 | this.titulacion = t;
52 | }
53 |
54 | estudiar() {
55 | return this.nombre + " estudia " + this.titulacion;
56 | }
57 | }
58 |
59 | let pepe = new Persona("Pepe", 17, 65);
60 | console.log(pepe);
61 |
62 | pepe = new Estudiante("Pepe", 17, 65, "MISSI");
63 | console.log(pepe);
64 | console.log(pepe.estudiar());
--------------------------------------------------------------------------------
/Tema_1/Codigo de ejemplo/HTML basico/htmlBasico.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
11 | 
12 | 
37 |
--------------------------------------------------------------------------------
/Tema_2/Codigo de ejemplo/03_Condicionales.js:
--------------------------------------------------------------------------------
1 | //OPERACIONES CON BOOLEANOS BASICAS - AND Y OR
2 |
3 | let verdadero = true;
4 | let falso = false;
5 | console.log(verdadero && verdadero); //AND
6 | console.log(verdadero && falso);
7 | console.log(falso && verdadero);
8 | console.log(falso && falso);
9 |
10 | console.log(verdadero || verdadero); //OR
11 | console.log(verdadero || falso);
12 | console.log(falso || verdadero);
13 | console.log(falso || falso);
14 |
15 | /*
16 | 5 - APROBADO
17 | 6 - APROBADO
18 | 7, 8 - NOTABLE
19 | 9 - SOBRESALIENTE
20 | 10 - MH
21 | */
22 |
23 | let nota = 4;
24 | let resultado;
25 |
26 | if(nota <= 0 && nota <= 10) {
27 | if(nota < 5) {
28 | resultado = "SUSPENSO";
29 | } else {
30 |
31 | if(nota >= 5 && nota < 7) {
32 | resultado = "APROBADO";
33 | } else if(nota >= 7 && nota < 9) {
34 | resultado = "NOTABLE";
35 | } else if(nota >= 9 && nota < 10) {
36 | resultado = "SOBRESALIENTE";
37 | } else {
38 | resultado = "MH";
39 | }
40 | }
41 | } else {
42 | resultado = "NOTA INVALIDA";
43 | }
44 |
45 | let textoCorreo;
46 |
47 | if(resultado === "APROBADO" || resultado === "NOTABLE" ||resultado === "SOBRESALIENTE" ||resultado === "MH") {
48 | textoCorreo = "Enhorabuena has aprobado";
49 | } else {
50 | textoCorreo = "Hay que estudiar mas";
51 | }
52 |
53 | console.log("variable var: " + variableDentroDeBloque);
54 |
55 |
56 | if(resultado !== "SUSPENSO" || resultado !== "NOTA INVALIDA") {
57 |
58 | var variableDentroDeBloque = 5;
59 | textoCorreo = "Enhorabuena has aprobado";
60 | } else {
61 | textoCorreo = "Hay que estudiar mas";
62 | }
63 |
64 | console.log("variable var: " + variableDentroDeBloque);
65 | console.log(resultado);
66 |
67 | console.log("----")
68 | let dos = 2;
69 | let dosCadena = "2";
70 | console.log(dos === dosCadena);
71 | console.log(dos == dosCadena);
--------------------------------------------------------------------------------
/Tema_5/Codigo de ejemplo/unir-delivery/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | 
