Desarrollo de Aplicaciones Web
Óscar Soto
01-2023
Presentación de la Asignatura
Micael Gallego
Correo: [email protected] Twitter: @micael_gallego Francisco Gortázar
Michel Maes Bermejo Micael Gallego
Óscar Soto Sánchez
01-2023
©2023 Francisco Gortázar Michel Maes Bermejo Micael Gallego, Óscar Soto Algunos derechos reservados
Este documento se distribuye bajo la licencia
“Atribución-CompartirIgual 4.0 Internacional”
de Creative Comons Disponible en https://creativecommons.org/licenses/by-sa/4.0/deed.es
3
3 3
Profesores
• Óscar Soto Sánchez
Correo: [email protected]
Despacho:
● 129 del Departamental II (Móstoles)
Tutorías:
● Concertar por mail y acordar horario
● Presenciales o mediante videoconferencia
4
4 4
Profesores
• Micael Gallego
Correo: [email protected]
Despacho:
● 119 del Departamental II (Móstoles)
5
5 5
Datos de la Asignatura
• Desarrollo de Aplicaciones Web
Tipo: Obligatoria
Materia: Lenguajes de Programación
Período de impartición: Segundo semestre
Créditos: 6
● Clase: 27 clases de 2h 54h→
● Trabajo total: 180h (54h clase / 126h fuera)
Web: Aula Virtual
6
6 6
Objetivos
• Que los alumnos puedan enfrentarse al desarrollo de una aplicación web de la forma más parecida a como lo harían a nivel profesional
• Características de las aplicaciones web
Aplicaciones distribuidas en las que el cliente se ejecuta en un navegador web y el servidor se ejecuta en un servidor web.
En la implementación del cliente se utilizan las tecnologías HTML, CSS y JavaScript.
En el servidor se pueden utilizar multitud de tecnologías Java, .NET, PHP, Ruby, Python, Node.js (JavaScript), etc.
7
7 7
Prerequisitos
• Asignatura “Fundamentos para la web”
– 2º curso / 1er cuatrimestre
– Contenidos
● HTML
● CSS
● JavaScript
8
8 8
Objetivos
• El temario de la asignatura se divide en 4 partes:
Parte 1. Tecnologías web básicas de cliente
Parte 2. Tecnologías web de servidor
Parte 3. Despliegue de aplicaciones web
Parte 4. Tecnologías web avanzadas de cliente
9
9 9
Temario
• Parte 1: Tecnologías web básicas de cliente:
HTML, CSS, JavaScript y APIs REST
– Tema 1: Introducción
– Tema 2: Maquetación (HTML y CSS)
– Tema 3: JavaScript
– Tema 4: APIs REST
● Esta parte no se evaluará porque se asume que los alumnos ya
conocen estas tecnologías por la asignatura “Fundamentos de la Web”.
● Los alumnos disponen de presentaciones y vídeos para recordar o completar información en caso de ser necesario
No evaluable
10
10 10
Temario
• Parte 2. Tecnologías web de servidor: Java, Spring y MySQL
–
Tema 1: Desarrollo web con Spring
–
Tema 2: APIs REST con Spring
–
Tema 3: Bases de datos con Spring
–
Tema 4: Seguridad en Spring
–
Tema 5: Despliegue Spring
11
11 11
Temario
• Parte 3. Despliegue de aplicaciones web
–
Tema 1. Virtualización, Cloud Computing y Contenedores
–
Tema 2. Docker
–
Tema 3. Docker Compose
–
Tema 4. Railway
–
Tema 5. Heroku
12
12 12
Temario
• Parte 4. Tecnologías web avanzadas de cliente: SPA con Angular
– Tema 1. Introducción: Angular, TypeScript y Herramientas
– Tema 2. Componentes en Angular
– Tema 3. REST y Servicios en Angular
– Tema 4. Aplicaciones multipágina. Router
– Tema 5. Librerías de componentes gráficos
– Tema 6. Publicación
13
13 13
Metodología Docente
• El objetivo es que los alumnos desarrollen una
aplicación web como si estuvieran trabajando
en profesionalmente
¿Qué
técnicas
docentes nos permiten
simular el
“mundo real”
en el aula?
Aprendizaje basado en proyectos
Project Based Learning
Aprendizaje Basado en Proyectos (PBL)
Estrategia de aprendizaje en la que los estudiantes se enfrentan a un proyecto que deben desarrollar.
Metodología docente basada en el alumnado como protagonista de su propio aprendizaje.
El aprendizaje de conocimientos tiene la misma importancia que la adquisición de habilidades y actitudes.
El método consiste en la realización de un proyecto, normalmente de cierta envergadura y en grupo
El proyecto ha sido analizado previamente por el
profesor para asegurarse de que el alumno tiene todo lo necesario para resolverlo, y que en su
resolución desarrollará todas las destrezas que se desea
Aprendizaje Basado en Proyectos (PBL)
PBL en Desarrollo Web
PBL en Desarrollo Web
Desarrollo de una Web en grupos de 4/5 alumnos
Para simular un equipo de desarrollo medio en el “mundo real”
Favorece el desarrollo de Competencias, Habilidades, Soft skills...
Cada grupo desarrolla una web diferente
Evita problemas de copia entre equipos e incentiva la colaboración
Dificultad similar
PBL en Desarrollo Web
Usando las tecnologías del temario
Para que tengan una base común y el profesor les pueda guiar Usando herramientas profesionales
Para estar preparados para el “mundo real”
Entrega por fases
Para recibir realimentación del profesor a modo de jefe (evaluando los aspectos técnicos) y a modo de cliente/usuario (evaluando las funcionalidades ofrecidas)
Aula Invertida
Flipped Classroom
Aula Invertida
Es un modelo pedagógico que transfiere el trabajo de determinados procesos de aprendizaje fuera del aula
Los docentes publican material para que la transmisión del conocimiento se haga fuera del aula
Se utiliza el tiempo de clase para
Facilitar y potenciar otros procesos de adquisición y práctica de conocimientos (con la ayuda del profesor)
Fomentar la participación de los estudiantes en el aprendizaje activo a través de preguntas, discusiones y actividades
aplicadas que fomentan la exploración, la articulación y aplicación de ideas.
http://www.theflippedclassroom.es/what-is-innovacion-educativa/
PBL en Desarrollo Web
el curso pasado
Aula Invertida en Desarrollo Web
Aula invertida en Desarrollo Web
Recursos para los alumnos
Grabaciones de clases en vídeo Presentaciones (Slides)
Ejemplos, ejercicios y solución a los ejercicios Referencias a páginas de Internet
Todo el material accesible con antelación
Calendario de trabajo sincronizado con las fases de realización del proyecto
Aula invertida en Desarrollo Web
Actividades en clase
Tutorías cuando se trabaja en la práctica (Just In Time) Realización del proyecto
Los problemas técnicos se solucionan de forma inmediata Evaluaciones de progreso más frecuentes y personalizadas Realimentación con notas condicionadas a la solución de
problemas
30
30 30
Metodología Docente
• El profesor no dará clase. Todo el material estará disponible como vídeos,
presentaciones, ejercicios propuestos y resueltos
• Se recomienda usar las últimas versiones de las tecnologías, librerías y herramientas si en los vídeos no aparece la última tecnología
disponible
31
31 31
Metodología Docente
• Dedicación a la asignatura: 6 créditos ECTS corresponden a 180h (54h clase / 126h fuera)
● Clase: 54h (27 sesiones de 2h)
– Hacer la práctica
– Evaluación del progreso de la práctica
– Preguntar dudas / pedir ayuda
● Resto del tiempo: 126h
– Ver los vídeos y las presentaciones
– Hacer ejercicios
– Hacer la práctica
– Estudiar para el examen
32
32 32
Metodología Docente
• Software necesario: Google Chrome, Visual Studio Code, Node.js, Java, Eclipse STS y
MySQL y PostgreSQL (en los vídeos se indica cuándo hace falta cada una)
• Software libre
• Se recomienda traer el portátil a clase (eso
facilita trabajar en el aula y en casa)
33
33 33
Evaluación
• Prácticas: 60%
–
Práctica 1: 20%
–
Práctica 2: 20%
–
Práctica 3: 20%
• Examen: 40%
–
Presencial en fecha oficial
34
34 34
Evaluación
• Prácticas:
–
3 Prácticas (fases de una aplicación)
–
Defensa de cada práctica en horario de clase (calendario ya fijado)
–
Enunciado ya disponible
35
35 35
Evaluación
• Examen:
– Parte práctica: Programación (todos)
– Parte teórica: preguntas cortas o tipo test
● Se realizarán 3 exámenes parciales tipo test a lo largo del curso (en horario de clase)
● Exámenes de la Parte 2, Parte 3 y Parte 4 del temario
36
36 36
Evaluación
• Parte teórica del examen:
– Si un alumno asiste a más del 80% podrá evitar hacer la parte de teoría del examen:
● Si aprueba todos los cuestionarios: No tiene que hacer la parte teórica del examen
● Suspende algún cuestionario: Tiene que hacer la parte teórica de las partes suspensas
NOTA: Todos los alumnos tienen que hacer la parte práctica del examen que consistirá en programar una pequeña app web
37
37 37
Evaluación
• Control de asistencia a clase
38
38 38
Calendario
Día Actividades de clase
24 Enero Presentación asignatura (Hoy)
30 Enero Introducción al “Desarrollo Aplicaciones Web” / Creación de equipos práctica
31 Enero Práctica
6 Febrero Entrega Fase 0: Tipo de web (No evaluable) 7 Febrero Práctica
13 Febrero Entrega Fase 1: Diseño páginas (No evaluable) 14 Febrero Práctica
20 Febrero Práctica 21 Febrero Práctica
27 Febrero Práctica / Examen Parte 2 28 Febrero Práctica
6 Marzo Entrega Fase 2: Web completa 7 Marzo Práctica
39
39 39
Calendario
Día Desarrollo de la clase 13 Marzo Práctica
14 Marzo Práctica
21 Marzo Práctica / Examen Parte 3 27 Marzo Práctica
28 Marzo Entrega Fase 3: API REST y Docker 11 Abril Práctica
17 Abril Práctica 18 Abril Práctica
24 Abril Práctica / Examen Parte 4 25 Abril Entrega Fase 4: Angular 8 Mayo Tutorías para el examen 9 Mayo Tutorías para el examen
40
40 40
• HTML5 & CSS3 For The Real World
By: Estelle Weyl; Louis Lazaris; Alexis
Goldstein
Publisher: SitePoint
March 27, 2015
Bibliografía
https://proquest.safaribooksonline.com/9781457192760
41
41 41
• Learning JavaScript, 3rd Edition
– By: Ethan Brown
– Publisher: O'Reilly Media, Inc.
– February 24, 2016
Bibliografía
https://proquest.safaribooksonline.com/9781491914892
42
42 42
Bibliografía
• Spring Essentials
– By: Shameer
Kunjumohamed;
Hamidreza Sattari
– Publisher: Packt Publishing
– Pub. Date: February 26, 2016
https://proquest.safaribooksonline.com/9781783982349
43
43 43
Bibliografía
• Essential Angular
– By: Victor Savkin; Jeff Cross
– Publisher: Packt Publishing
– Pub. Date: May 31, 2017
https://proquest.safaribooksonline.com/9781788293761
44
44 44
Bibliografía
•
Biblioteca virtual para alumnos
• Pasos para acceder a la Biblioteca virtual de la URJC (Colección Safari) desde fuera de la universidad
• 1) Ir a myapps
• 2) Abrir un navegador
• 3) Abrir la web de la biblioteca
https://www.urjc.es/estudiar-en-la-urjc/biblioteca
• 4) Buscar en Libros-e
45
45 45
Bibliografía
• Internet
Páginas oficiales de los estándares y tecnologías
Tutoriales, ejemplos y blogs realizados por la comunidad
Aplicaciones web de código abierto
Y todo lo que Google encuentre :)
Mucho cuidado con las versiones y la fecha de publicación!!!
Desarrollo de Aplicaciones Web
Micael Gallego
Correo: [email protected] Twitter: @micael_gallego
