Semestre 2019-20
| Nombre del curso: | Programación de Tecnologías Web |
| Course Name: | — |
| Créditos: | 3 |
| Profesor: | José Bocanegra j.bocanegra@uniandes.edu.co |
| Versión PDF | Click Aquí |
Descripción
Este curso ofrece los fundamentos para entender el desarrollo web moderno. Al final de este curso, los estudiantes deben poder crear aplicaciones web modernas utilizando tecnologías de vanguardia. También deberían haber desarrollado una sólida comprensión de las arquitecturas web modernas, así como conocer la historia de dónde vinieron. Adicionalmente, los estudiantes deben aprender habilidades básicas de diseño web, accesibilidad, desempeño y seguridad.
Durante el semestre, los estudiantes estudiarán y prepararán materiales asíncronos que cubren conceptos básicos de desarrollo web y tecnologías web. Las clases se utilizarán entonces para reforzar esos conceptos, para discusiones y para cubrir conceptos avanzados.
Objetivos del Curso
El curso está diseñado con base en 4 grandes ideas. Se espera que al finalizar el curso estudiante cumpla con una serie de objetivos en cada una de estas.
Idea 1: Diseño Arquitectura
La calidad de las aplicaciones Web depende de un diseño arquitectónico adecuado tal que:
- Sea expresado en términos de estilos arquitectónicos y patrones de diseño conocidos.
- Cumpla con los atributos de calidad requeridos, en particular, usabilidad, seguridad, accesibilidad, internacionalización y desempeño.
Entendimientos Perdurables
- 1.1 El diseño arquitectural de una aplicación web se debe poder explicar y justificar con base en los requisitos funcionales y los atributos de calidad esperados.
- 1.2 El lenguaje de diseño, o la explicación del diseño, debe hacerse en términos de los estilos arquitectónicos y patrones de diseño conocidos. La explicación debe sustentar las ventajas del diseño seleccionado.
Resultados Observables (Objetivos)
Se espera que el estudiante esté en capacidad de:
- Explicar y especificar para un problema dado, los atributos de calidad relacionados con usabilidad, seguridad, accesibilidad, internacionalización, desempeño.
- Diseñar la arquitectura de la aplicación, utilizando los estilos de arquitectura conocidos (MV*), tácticas y patrones de diseño
- Proponer alternativas de diseño que satisfagan los atributos de calidad y los requisitos funcionales.
- Justificar y analizar el diseño seleccionado de acuerdo con las ventajas y desventajas.
Idea 2: Proceso de Diseño
El desarrollo de una aplicación web debe seguir un proceso de diseño incremental e iterativo, centrado en el usuario, considerando lineamientos para interacción, organización y presentación de la información.
Entendimientos Perdurables
- Cómo el usuario interactúa con los elementos de la aplicación: heurísticas de Nielsen (coherencia, lenguaje del usuario, feedback, etc).
- Cómo organizar la información (layouts), single-page applications, patrones de requisitos de búsquedas, filtros, maestros/detalles, paletas, mapas, etc.
2.1 La experiencia del usuario con la aplicación es un aspecto crucial en el proceso de diseño que incluye:
2.2 Un buen diseño se logra de manera incremental e iterativa donde cada prototipo/incremento se valida con el usuario para realizar ajustes si es necesario.
Resultados Observables (Objetivos)
- Aplicar patrones de arquitectura de información para diseñar los layouts y la interacción del usuario con la aplicación.
- Seguir un proceso de construcción incremental e iterativo
- Prototipar continuamente con el fin de validar el diseño
Se espera que el estudiante esté en capacidad de:
Idea 3: Calidad de la aplicación
La calidad de la aplicación web desarrollada se debe poder medir de manera objetiva tanto en lo funcional como en los atributos de calidad.
Entendimientos Perdurables
- 3.1 Se deben realizar distintos tipos de pruebas sobre la aplicación web para verificar su calidad: unitarias, sistema, accesibilidad, carga.
- 3.2 Los experimentos con usuarios son parte integral de la validación incremental de la aplicación
Resultados Observables (Objetivos)
Se espera que el estudiante esté en capacidad de:
- Validar que su diseño satisface las escalas y heurísticas conocidas
- Desarrollar pruebas unitarias automatizadas a medida que construye la aplicación web.
- Desarrollar pruebas de usuario automatizadas para la aplicación web.
- Desarrollar experimentos con usuarios para medir la usabilidad de la aplicación web (prototipos, guerrilla, entre otros)
Idea 4: Uso de tecnologías y herramientas
Utilizar efectivamente tecnologías, frameworks y herramientas para desarrollar las aplicaciones web y para dar soporte al proceso de desarrollo.
Entendimientos Perdurables
- 4.1 Reconocer en los distintos frameworks de desarrollo web los estilos arquitecturales que promueven.
- 4.2 Comprender que el uso adecuado de un framework de desarrollo web requiere dedicación y práctica.
Resultados Observables (Objetivos)
Se espera que el estudiante esté en capacidad de:
- Explicar en detalle las características de al menos un framework de desarrollo web, en términos de los estilos arquitecturales que promueve.
- Utilizar adecuadamente un framework para el desarrollo de la aplicación web
- Utilizar adecuadamente las demás tecnologías y herramientas que se requieran para hacer las pruebas y dar soporte al proceso de desarrollo.
Metodología
Se espera que los estudiantes adquieran conocimientos y desarrollen habilidades a través de un proyecto de desarrollo web en grupos de 3 estudiantes.
El proceso de desarrollo es incremental e iterativo en donde en cada iteración se van incluyendo nuevos elementos teóricos relacionados con la arquitectura y construcción de la aplicación.
1. Tanto el contenido como las actividades del curso se publicarán en https://sicuaplus.uniandes.edu.co
2. El modelo de atención a estudiantes acordará entre profesor y estudiantes en la primera semana de clases.
El curso se calificará en dos exámenes individuales teórico/prácticos que valen el 30% de la nota del curso; en cinco entregables del proyecto de curso que equivalen al 50%; y en un 20% correspondiente a actividades en clase, controles de lectura y quices.
| Evaluación | Porcentaje |
|---|---|
| Parcial 1 | 15% |
| Parcial 2 | 15% |
| Proyecto entrega 1 | 10% |
| Proyecto entrega 2 | 10% |
| Proyecto entrega 3 | 10% |
| Proyecto entrega 4 | 10% |
| Proyecto entrega 5 | 10% |
| Actividades en clase | 20% |
Políticas de calificaciones
- Los proyectos (a excepción de la primera entrega) deben ser realizados en grupo, el cual será conformado por el profesor. Las notas de las entregas del proyecto son individuales y dependerán del trabajo realizado por cada uno de los integrantes. Nota: Si hay evidencia de que un integrante no trabajó para la entrega, su nota en esa entrega será de 0.0.
- Para aprobar el curso la nota calculada debe ser al menos de 3.00. Las definitivas se darán en dos decimales. Las notas finales tendrán dos decimales. Las reglas del redondeo que se aplican al segundo decimal son: si el tercer dígito es menor que 5, el anterior no se modifica. Si es mayor o igual que 5, el anterior se incrementa en una unidad.
Asistencia a clase
- La asistencia a clase y a la sesión es obligatoria. Cada estudiante debe firmar una hoja de asistencia que el profesor entregará al comienzo de la clase. Es responsabilidad del estudiante firmar la hoja de asistencia al comienzo de la clase.
- El estudiante que no asista a por lo menos el 80% de las clases no podrá aprobar el curso.
Recursos
- El detalle de los objetivos, así como, el calendario del curso y los enlaces a talleres y lecturas se encuentran en el sitio web del curso: https://sicuaplus.uniandes.edu.co/
- Las calificaciones del curso, así como material adicional, serán publicados en el espacio del curso en sicua: https://sicuaplus.uniandes.edu.co/
Temas, qué y cómo
| Temas | Qué | Cómo |
|---|---|---|
| Fundamentos | •Historia, Evolución del desarrollo web…•Arquitectura de los browser HTML- DOM…•HTTP…•HTML…•Javascript – TypeScript, CSS…•Asincronía | Explicaciones a través de ejemplos y talleres cortos…Clase presencial de conceptos…Lecturas complementarias. |
| Diseño UI y frameworks | •Estilos y patrones MV* (React, Meteor)•Prototipado | Ejercicios pequeños focalizados en explicar las diferencias entre los estilos.Usar…TodoMVC…Prototipo Inicial del proyecto |
| Proceso de Diseño | •Restricciones de diseño, atributos de calidad: accesibilidad, internacionalización, desempeño, seguridad…•Accesibilidad e Internacionalización | Inicio proyecto, prototipar ideas…Plantear proceso…Ejemplos, aplicación en el proyecto, pruebas |
| Ux | •Arquitectura de información•Single Page Application, PWA•Interacción, componentes, layout, patrones de diseño•CSS, Bootstrap | Ejemplos, aplicación en el proyecto, pruebas |
| Desempeño | •Manejo de volúmenes de datos, el diseño del API REST | Ejemplos, aplicación en el proyecto, pruebas |
| Seguridad | •OWASP•XSS, injection•Vulnerabilities•Servers Config | Ejemplos, aplicación en el proyecto, pruebas |
Bibliografía
- Cantelon, M., Harter, M., Holowaychuk, T. J., & Rajlich, N. (2014). Node. js in Action. Greenwich: Manning.
- Collins, M. J. (2017). AJAX. In Pro HTML5 with CSS, JavaScript, and Multimedia. Apress, Berkeley, CA.
- Haverbeke, M. (2014). Eloquent javascript: A modern introduction to programming. No Starch Press.