PDF de programación - Desarrollo de Aplicaciones Telemáticas

Desarrollo de Aplicaciones Telemáticas
Grado en Ingeniería en Tecnologías de

Telecomunicación

Programa del curso 2016/2017

Jesús M. González Barahona, Gregorio Robles Martínez

GSyC, Universidad Rey Juan Carlos

1 de junio de 2017

Índice general

1. Características de la asignatura

1.1. Datos generales . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2. Objetivos
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.3. Metodología . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.4. Evaluación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7
7
8
8
8

2. Programa

2.2.

2.3.

2.4.

10
2.1. Presentación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.1. Sesión del 16 de enero (2 horas) . . . . . . . . . . . . . . . . 10
2.1.2. Sesión del 17 de enero (0.5 horas) . . . . . . . . . . . . . . . 10
Introducción a HTML . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.1. Sesión del 23 de enero (2 horas) . . . . . . . . . . . . . . . . 10
Introducción a CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.3.1. Sesión del 17 de enero (1.5 horas) . . . . . . . . . . . . . . . 11
2.3.2. Sesión del 24 de enero (2 horas) . . . . . . . . . . . . . . . . 11
Introducción a Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . 12
2.4.1. Sesión del 31 de enero (2 horas) . . . . . . . . . . . . . . . . 12
2.4.2. Sesión del 7 de febrero (2 horas) . . . . . . . . . . . . . . . . 12
Introducción a JavaScript
. . . . . . . . . . . . . . . . . . . . . . . 13
2.5.1. Sesión del 30 de enero (2 horas) . . . . . . . . . . . . . . . . 13
2.5.2. Sesión del 6 de febrero (2 horas) . . . . . . . . . . . . . . . . 13
2.5.3. Sesión del 20 de febrero (2 horas) . . . . . . . . . . . . . . . 13
2.5.4. Sesión del 21 de febrero (2 horas) . . . . . . . . . . . . . . . 14
2.5.5. Sesión del 27 de febrero (2 horas) . . . . . . . . . . . . . . . 14
Introducción a jQuery . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.6.1. Sesión del 6 de marzo (2 horas) . . . . . . . . . . . . . . . . 14
2.6.2. Sesión del 13 de marzo (2 horas)
. . . . . . . . . . . . . . . 15
2.6.3. Sesión del 27 de marzo (2 horas)
. . . . . . . . . . . . . . . 15
2.6.4. Sesión del 3 de abril (1 hora)
. . . . . . . . . . . . . . . . . 16
Introducción a HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.7.1. Sesión del 13 de febrero (2 horas) . . . . . . . . . . . . . . . 16

2.5.

2.6.

2.7.

1

2.7.2. Sesión del 14 de febrero (2 horas) . . . . . . . . . . . . . . . 16
2.7.3. Sesión del 28 de febrero (2 horas) . . . . . . . . . . . . . . . 17
2.7.4. Sesión del 7 de marzo (2 horas) . . . . . . . . . . . . . . . . 17
. . . . . . . . . . . . . . . 17
2.7.5. Sesión del 14 de marzo (2 horas)
2.7.6. Sesión del 21 de marzo (2 horas)
. . . . . . . . . . . . . . . 17
2.8. Otras bibliotecas JavaScript . . . . . . . . . . . . . . . . . . . . . . 18
. . . . . . . . . . . . . . . . . 18
2.9. APIs JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
. . . . . . . . . . . . . . . . 18
. . . . . . . . . . . . . . . . 19
2.10. APIs de Google . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
. . . . . . . . . . . . . . . 19
2.11. Presentación de la Práctica final . . . . . . . . . . . . . . . . . . . . 19

2.9.1. Sesión del 17 de abril (2 horas)
2.9.2. Sesión del 24 de abril (2 horas)

2.8.1. Sesión del 3 de abril (1 hora)

2.10.1. Sesión del 28 de marzo (2 horas)

3. Temas antiguos

20
3.1. OAuth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.1.1. Sesión del XX de abril (2 horas) . . . . . . . . . . . . . . . . 20
3.2. Firefox OS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.2.1. Sesión del XX de abril (2 horas) . . . . . . . . . . . . . . . . 20
3.3. Optimización . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.3.1. Sesión del XX de abril (2 horas) . . . . . . . . . . . . . . . . 21

4. Enunciados de miniprácticas preparatorias

22
4.1. Calculadora SPA . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.2. Socios
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

5. Enunciados de prácticas: proyectos finales

25
5.1. Aparcamientos para residentes en Madrid (mayo 2017, borrador) . . 25
5.1.1. Enunciado . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.1.2. Funcionalidad optativa . . . . . . . . . . . . . . . . . . . . . 28
5.1.3. Entrega de la práctica . . . . . . . . . . . . . . . . . . . . . 29
5.2. Práctica final (2017, junio) . . . . . . . . . . . . . . . . . . . . . . . 30
5.3. Alojamientos en Madrid (mayo 2016) . . . . . . . . . . . . . . . . . 31
5.3.1. Enunciado . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.3.2. Funcionalidad optativa . . . . . . . . . . . . . . . . . . . . . 33
5.3.3. Entrega de la práctica . . . . . . . . . . . . . . . . . . . . . 34
5.4. Práctica final (2016, junio) . . . . . . . . . . . . . . . . . . . . . . . 36
5.5. Adivina dónde está (junio 2015) . . . . . . . . . . . . . . . . . . . . 36
5.5.1. Enunciado . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
5.5.2. Funcionalidad optativa . . . . . . . . . . . . . . . . . . . . . 38
5.5.3. Entrega . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

2

5.6. Adivina dónde está (mayo 2015) . . . . . . . . . . . . . . . . . . . . 40
5.6.1. Enunciado . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.6.2. Funcionalidad optativa . . . . . . . . . . . . . . . . . . . . . 42
5.6.3. Entrega (convocatoria de junio entre paréntesis) . . . . . . . 42
. . . . . . . . . . . . . . . . . . . 44
5.7.1. Funcionalidad optativa . . . . . . . . . . . . . . . . . . . . . 46
. . . . . . . . . . . . . . . . . . . 48
5.8.1. Funcionalidad optativa . . . . . . . . . . . . . . . . . . . . . 49

5.7. Mashup de servicios (mayo 2014)

5.8. Mashup de servicios (mayo 2013)

6. Ejercicios (microprácticas diarias)
6.1. Entrega de prácticas incrementales

52
. . . . . . . . . . . . . . . . . . 52
6.1.1. Uso de la rama gh-pages . . . . . . . . . . . . . . . . . . . . 53
6.1.2. Uso de la rama gh-pages con dos clones . . . . . . . . . . . . 55
6.1.3. Más información sobre GitHub Pages . . . . . . . . . . . . . 56
6.2. HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
. . . . . . . 56
6.2.1. Espía a tu navegador (Firefox Developer Tools)
6.2.2. Espía a tu navegador (Firebug)
. . . . . . . . . . . . . . . . 56
6.2.3. HTML simple . . . . . . . . . . . . . . . . . . . . . . . . . . 57
6.2.4. HTML de un sitio web . . . . . . . . . . . . . . . . . . . . . 58
6.2.5. HTML con JavaScript
. . . . . . . . . . . . . . . . . . . . . 58
6.2.6. Manipulación de HTML desde Firebug . . . . . . . . . . . . 58
6.3. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
6.3.1. Añadir selectores . . . . . . . . . . . . . . . . . . . . . . . . 59
6.3.2. Añadir reglas CSS . . . . . . . . . . . . . . . . . . . . . . . 59
6.3.3. Márgenes y rellenos . . . . . . . . . . . . . . . . . . . . . . . 59
6.3.4. Bordes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
6.3.5. Colores e imágenes de fondo . . . . . . . . . . . . . . . . . . 61
6.3.6. Tipografía . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
6.3.7. Creación de una cabecera de página . . . . . . . . . . . . . . 62
6.3.8. Creación de un pie de página . . . . . . . . . . . . . . . . . 63
6.3.9. Menú de navegación . . . . . . . . . . . . . . . . . . . . . . 63
6.3.10. Diseño a 2 columnas con cabecera y pie de página . . . . . . 64
6.3.11. Una caja CSS2 . . . . . . . . . . . . . . . . . . . . . . . . . 65
6.3.12. Bordes redondeados . . . . . . . . . . . . . . . . . . . . . . . 66
6.3.13. Sombra de texto
. . . . . . . . . . . . . . . . . . . . . . . . 66
6.3.14. Sombra de borde . . . . . . . . . . . . . . . . . . . . . . . . 66
6.3.15. Fondo semitransparente
. . . . . . . . . . . . . . . . . . . . 66
6.3.16. Fondo en gradiente . . . . . . . . . . . . . . . . . . . . . . . 66
6.3.17. Alpha en los bordes . . . . . . . . . . . . . . . . . . . . . . . 67
6.3.18. Rotación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
6.3.19. Escalado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

3

6.3.20. Rotación en el eje de las Y . . . . . . . . . . . . . . . . . . . 67
6.3.21. Animación . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
6.3.22. Transiciones . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
6.3.23. Tu hoja de estilo CSS3 . . . . . . . . . . . . . . . . . . . . . 68
6.4. Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
6.4.1.
Inspeccionando Bootstrap . . . . . . . . . . . . . . . . . . . 68
6.4.2. Una sencilla página con Bootstrap . . . . . . . . . . . . . . . 68
6.4.3. Utilizando el Jumbotron de Bootstrap . . . . . . . . . . . . 68
6.4.4. Utilizando el Carousel de Bootstrap . . . . . . . . . . . . . . 69
6.4.5. El grid de Bootstrap . . . . . . . . . . . . . . . . . . . . . . 69
6.4.6. Bootstrap responsivo . . . . . . . . . . . . . . . . . . . . . . 69
6.4.7. Concurso: Tu diseño Bootstrap . . . . . . . . . . . . . . . . 70
6.5. JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
6.5.1.
Iteración sobre un objecto . . . . . . . . . . . . . . . . . . . 70
6.5.2. Vacía página . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
6.5.3. De lista a lista ordenada . . . . . . . . . . . . . . . . . . . . 71
6.5.4. Función que cambia un elemento HTML . . . . . . . . . . . 71
6.5.5. Sumador JavaScript muy simple . . . . . . . . . . . . . . . . 72
6.5.6. Sumador JavaScript muy simple con sumas aleatorias . . . . 73
6.5.7. Mostrador aleatorio de imágenes . . . . . . . . . . . . . . . . 73
6.5.8. JSFiddle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
6.5.9. Greasemonkey . . . . . . . . . .