Titulación
Máster en Enseñanzas Artísticas en Diseño interactivo
Descripción de la asignatura
Asignatura intensiva de carácter introductorio al desarrollo de webs, web apps e interfaces genéricas con tecnologías web como HTML, CSS, Preprocesadores CSS y JS.
El interés de esta asignatura no es meramente aprender hasta un nivel avanzado de desarrollo web estático, sino que también está orientado a conocer sistemas eficientes de diseño y desarrollo con trabajo de componentes, estados, etc... que apoyan la tarea de desarrolladores y diseñadores.
1. Identificadores de la asignatura
Tipo
Obligatoria de especialidad
Carácter
teórico-práctica
Especialidad / itinerario / estilo / instrumento
Máster en Diseño de Interacción
Materia
Medios Informáticos aplicados al Diseño
Periodo de impartición - curso
MDI
Periodo de impartición - semestre
1º semestre
Número de horas totales
100
Número de horas presenciales
60
Departamento
Departamento de medios informáticos y audiovisuales
Prelación / requisitos previos
Idioma/s en los que se imparte
2. Profesor responsable de la asignatura
Aparicio de Santiago
Carlos
3. Relación de profesores y grupos a los que imparten docencia
Profesor
Aparicio de Santiago
Carlos
4. Competencias
Competencias transversales
3CT Solucionar problemas y tomar decisiones que respondan a los objetivos del trabajo que se realiza
9CT Integrarse adecuadamente en equipos multidisciplinares y en contextos culturales diversos
12CT Adaptarse, en condiciones de competitividad a los cambios culturales, sociales y artísticos y a los avances que se producen en el ámbito profesional y seleccionar los cauces adecuados de formación continuada
15CT Trabajar de forma autónoma y valorar la importancia de la iniciativa y el espíritu emprendedor en el ejercicio profesional
Competencias generales
7CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
10CG Ser capaces de adaptarse a los cambios y a la evolución tecnológica industrial
17CG Plantear, evaluar y desarrollar estrategias de aprendizaje adecuadas al logro de objetivos personales y profesionales
20CG Comprender el comportamiento de los elementos que intervienen en el proceso comunicativo, dominar los recursos tecnológicos de la comunicación y valorar su influencia en los procesos y productos del diseño
Competencias generales Máster en diseño de Interacción
CB4 Comunicar sus conclusiones, y los conocimientos y razones últimas que las sustentan, a públicos especializados y no especializados de un modo claro y sin ambigüedades
CB6 Adquirir conocimientos avanzados en un contexto de investigación científica y tecnológica altamente especializada, una comprensión detallada y fundamentada de los aspectos teóricos y prácticos y de la metodología de trabajo en uno o más campos de estu
Competencias específicas Máster en diseño de Interacción
CE2 Realizar proyectos de diseño interactivo apropiados a los condicionantes comunicativos, tecnológicos y capaces de atender a los requerimientos de accesibilidad a la información
CE8 Desarrollar metodologías de investigación avanzadas en el ámbito del diseño interactivo que permitan una utilización innovadora de las tecnologías aplicables al diseño y a la comunicación
Otras competencias específicas no incluidas en el plan de estudios
Que el alumno conozca las características y propiedades de los distintos tipos de lenguajes de programación y la finalidad de su aplicación.
Que el alumno adquiera experiencia en el uso de al menos un lenguaje de programación de cada uno de los tipos mostrados y capacidad para aprender nuevos lenguajes.
Adquisición del conocimiento necesario para elegir el lenguaje más adecuado a cada tipo de proyecto.
Conocer las posibilidades de la programación en las prácticas artísticas y el diseño, en busca de la estética y métodos alternativos de la creación y construir nuevos modelos de expresión para los artistas, diseñadores y arquitectos.
5. Resultados del aprendizaje
Resultados del aprendizaje
Manejar a nivel profesional el lenguaje HTML, en el estándar HTML5 desde la perspectiva de la web semántica
Manejar de manera avanzada de Layouts en CSS y tipografía
Diseñar tipografías icónicas para diseñar e implementar interfaces de usuario.
Diseñar componentes BEM en HTML y CSS, y hacer una implementación basada en clases.
Usar y manejar del sistema de control de versiones GIT con GITHub o BitBucket.
Convertir un layout estático en un proyecto web.
6. Contenidos
Contenidos
Tema 3. Maquetación con CSS-Grid y Flexbox. Box model props
Tema 4. Tipografía digital y tipografía en web
II.- Desarrollo estratégico
Tema 5. Preprocesadores CSS
II.- Desarrollo estratégico
Tema 6. Clases abstractas y clases modificadoras
II.- Desarrollo estratégico
Tema 7. Responsive web design
Tema 8. Modern Tooling para CSS - PostCSS y TailwindCSS
Tema 9. Manejo de terminal, NPM, Git y GitHub
Tema 10. Despliegue de una aplicación en Netlify
7. Planificación temporal del trabajo del estudiante
Actividades teórico-prácticas
46 horas
Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)
14 horas
Realización de pruebas
0 horas
Horas de trabajo del estudiante
28 horas
Preparación prácticas
12 horas
8. Metodología
Actividades prácticas
La metodología de esta asignatura está basada en la adquisición de competencias mediante el trabajo práctico con explicaciones teóricas de módulos que sean necesarios para llevar a cabo los objetivos prácticos previamente marcados.
El sistema, por tanto, es teórico:práctico en el que se darán partes teóricas que se intercalan con trabajos en grupo o con trabajos individuales a realizar en el aula bajo la tutela del profesor y de manera autónoma en tiempo de trabajo personal. Dichas prácticas o ejercicios prácticos servirán para lanzar cuestiones teóricas para la adquisición o mejora de competencias y para la posterior evaluación y calificación.
Aprendizaje basado en proyectos: Se plantean ciertos proyectos durante la asignatura, donde se ponen en práctica los conocimientos adquiridos en los módulos teóricos correspondientes. Dichos proyectos pueden ser de tipo individual o grupal.
Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)
Se participará en los E ESE DAYS, las jornadas de diseño programadas en la Escuela. Las actividades que se desarrollen en esos días, formarán parte de las actividades de la asignatura.
Siguiendo las instrucciones de inicio de curso, se refleja que el porcentaje mínimo de asistencia del alumno para la evaluación continua, no puede ser inferior al 80% del porcentaje total de las sesiones impartidas
9. Instrumentos y criterios de evaluación y calificación
9.1 Instrumentos de evaluación
Actividades prácticas
Se van a plantear un conjunto de proyectos de menor a mayor nivel, donde se van aplicando los bloques de contenido. La cantidad de proyectos oscila entre 2 y 3 en función de la profundidad y calado de los proyectos.
Ello se efectuará analizando si el material presentado por el alumno demuestra el conocimiento teórico de la asignatura y si ha aprovechado los conocimientos de las clases teórico prácticas a realizar.
Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)
9.2 Criterios de evaluación
Actividades prácticas
Los proyectos se evaluarán con una rúbrica en función de los objetivos que se marquen en los correspondientes enunciados. Dichos objetivos están relacionados con los resultados de aprendizaje a abordar en cada tema.
Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)
9.3 Criterios de calificación
9.3.1 Ponderación de los instrumentos de evaluación para la evaluación continua
Actividades prácticas y otras actividades formativas
90%
Actitud y participación
10%
9.3.2 Ponderación de instrumentos de evaluación para la evaluación con perdida de la evaluación continua y duración de la prueba
9.3.3 Ponderación de instrumentos de evaluación para la evaluación extraordinaria y duración de la prueba
9.3.4 Ponderación para la evaluación de estudiantes con discapacidad
Actividades prácticas y otras actividades formativas
90%
Actitud y participación
10%
10. Planificación temporal de los contenidos, metodología docente y evaluaciones. Cronograma
Semana 1
Bloque temático
I.- Iniciación
Tema / repertorio
Tema 1. HTML básico
Actividades teóricas
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
11CEP Conocer los recursos tecnológicos de la comunicación y sus aplicaciones al diseño de producto
Actividades prácticas
Actividad
Desarrollo HTML jerárquico
Metodología
teórico - práctica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
7CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 2
Bloque temático
I.- Iniciación
Tema / repertorio
Tema 2. CSS básico
Actividades teóricas
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
11CEP Conocer los recursos tecnológicos de la comunicación y sus aplicaciones al diseño de producto
Actividades prácticas
Metodología
teórico - práctica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
7CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 3
Bloque temático
I.- Iniciación
Tema / repertorio
Tema 3. Maquetación con CSS-Grid y Flexbox. Box model props
Actividades teóricas
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
11CEP Conocer los recursos tecnológicos de la comunicación y sus aplicaciones al diseño de producto
Actividades prácticas
Metodología
teórico - práctica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
7CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 4
Bloque temático
I.- Iniciación
Tema / repertorio
Tema 4. Tipografía digital y tipografía en web
Actividades teóricas
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
11CEP Conocer los recursos tecnológicos de la comunicación y sus aplicaciones al diseño de producto
Actividades prácticas
Actividad
Entrega proyecto clon web
Metodología
teórico - práctica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
7CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 5
Bloque temático
II.- Desarrollo estratégico
Tema / repertorio
Tema 5. Preprocesadores CSS
Actividades teóricas
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
11CEP Conocer los recursos tecnológicos de la comunicación y sus aplicaciones al diseño de producto
Actividades prácticas
Actividad
Desarrollo HTML jerárquico
Metodología
teórico - práctica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
7CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 6
Bloque temático
II.- Desarrollo estratégico
Tema / repertorio
Tema 6. Clases abstractas y clases modificadoras
Actividades teóricas
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
11CEP Conocer los recursos tecnológicos de la comunicación y sus aplicaciones al diseño de producto
Actividades prácticas
Metodología
teórico - práctica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
7CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 7
Bloque temático
II.- Desarrollo estratégico
Tema / repertorio
Tema 6. Clases abstractas y clases modificadoras
Actividades teóricas
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
11CEP Conocer los recursos tecnológicos de la comunicación y sus aplicaciones al diseño de producto
Actividades prácticas
Actividad
Desarrollo HTML estratégico
Metodología
teórico - práctica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
7CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 8
Bloque temático
II.- Desarrollo estratégico
Tema / repertorio
Tema 7. Responsive web design, Tema 8. Modern Tooling para CSS - PostCSS y TailwindCSS
Actividades teóricas
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
11CEP Conocer los recursos tecnológicos de la comunicación y sus aplicaciones al diseño de producto
Actividades prácticas
Actividad
Proyecto propio
Metodología
teórico - práctica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
7CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 9
Bloque temático
III.- Modern Tooling
Tema / repertorio
Tema 9. Manejo de terminal, NPM, Git y GitHub, Tema 10. Despliegue de una aplicación en Netlify
Actividades teóricas
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
11CEP Conocer los recursos tecnológicos de la comunicación y sus aplicaciones al diseño de producto
Actividades prácticas
Actividad
Proyecto propio
Metodología
teórico - práctica
Competencias
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
4CT Utilizar eficientemente las tecnologías de la información y la comunicación
7CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
11. Recursos y materiales didácticos
Bibliografía complementaria
Direcciones web de interes
Otros materiales y recursos didácticos
Programa o entorno de programación libre. Preferiblemente Sublime Text 3, Atom o Brackets.
Programas de edición de imágenes como Gimp o Adobe Photoshop.
Programas de edición de gráfcos vectoriales como Inkscape o Adobe Illustrator.
Programas de prototipado UI como Figma o Sketch.
Navegador Google Chrome o Mozilla Firefox
Conexión a internet en el aula Proyector en el aula.
