Curso 2020-2021

Programación para Diseñadores y artistas visuales

Titulación
Máster en Diseño Interactivo
Nivel de título
Máster
Descripción de la asignatura

Asignatura intensiva de caracter introductorio al desarrollo de webs, webapps e interfaces genéricas con tecnologías web como HTML, CSS, Preprocesadores CSS y JS. 

El interés de esta asignatura no es méramente aprender hasta un nivel avanzado de desarrollo web estático, si no 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 créditos
4
Número de horas totales
100
Número de horas presenciales
60
Departamento
Departamento de medios informáticos y audiovisuales
Prelación / requisitos previos

Sin requisitos previos

Idioma/s en los que se imparte
Español
Inglés
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
Grupo
A
4. Competencias
Competencias transversales
1CT Organizar y planificar el trabajo de forma eficiente y motivadora
2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente
6CT Realizar autocrítica hacia el propio desempeño profesional e interpersonal
13CT Buscar la excelencia y la calidad en su actividad profesional
14CT Dominar la metodología de investigación en la generación de proyectos, ideas y soluciones viables
15CT Trabajar de forma autónoma y valorar la importancia de la iniciativa y el espíritu emprendedor en el ejercicio profesional
Competencias generales
1CG Investigar en los aspectos intangibles y simbólicos que inciden en la calidad
2CG Ser capaces de adaptarse a los cambios y a la evolución tecnológica industrial
3CG Comunicar ideas y proyectos a los clientes, argumentar razonadamente, saber evaluar las propuestas y canalizar el diálogo
7CG Conocer procesos y materiales y coordinar la propia intervención con otros profesionales, según las secuencias y grados de compatibilidad
9CG Plantear, evaluar y desarrollar estrategias de aprendizaje adecuadas al logro de objetivos personales y profesionales
13CG Dominar la metodología de investigación
15CG Concebir, planificar y desarrollar proyectos de diseño de acuerdo con los requisitos y condicionamientos técnicos, funcionales, estéticos y comunicativos
16CG Dominar los lenguajes y los recursos expresivos de la representación y la comunicación
Competencias generales Máster en diseño de Interacción
CB1 Poseer y comprender conocimientos que aporten una base u oportunidad de ser originales en el desarrollo y en la aplicación de ideas, a menudo en un contexto de investigación
CB3 Integrar conocimientos y enfrentarse a la complejidad de formular juicios a partir de una información que, siendo incompleta o limitada, incluya reflexiones sobre las responsabilidades sociales y éticas vinculadas a la aplicación de sus conocimientos
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
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ándard HTML5 desde la perspectiva de la web semántica
Control y diseño de formularios en HTML.
Manejo avanzado de Layouts en CSS.
Manejo avanzado de tipografía en CSS.
Diseño de tipografías icónicas para diseñar e implementar interfaces de usuario.
Diseño de componenetes BEM en HTML y CSS, y hacer una implementación basada en clases y OOPCSS.
Uso y manejo del sistema de control de versiones GIT con GITHub o BitBucket.
Convertir un layout estático en un proyecto web.

Siguiendo las instrucciones de la resolución de la Dirección General de Universidades y Enseñanzas Artísticas Superiores para el curso 20-21 de 4/09/20, la ESD comienza el curso en el escenario 2 y modalidad semipresencial, lo que implica una asistencia alterna por semanas al centro, simultaneando la enseñanza con presencialidad física/presencialidad interactiva, en grupos divididos. Las guías docentes se elaboran teniendo en cuenta este escenario y la planificación de tareas y contenidos se adapta a esta modalidad. En estas guías del curso 20-21 cada asignatura hará un esfuerzo por completar los conocimientos que han podido dejar de impartirse en semestres anteriores.

6. Contenidos
Contenidos
Iniciación
HTML básico
Iniciación
CSS básico
Iniciación
Maquetación con CSS-Grid y Flexbox. Box model props
Iniciación
Tipografía digital y tipografía en web
Desarrollo estratégico
Preprocesadores CSS
Desarrollo estratégico
Clases abstractas y clases modificadoras
Desarrollo estratégico
Responsive web design
Proyecto propio
Proyecto propio
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 teóricas

No están contempladas

Adaptación COVID: Debido a la situación de excepcionalidad que nos encontramos derivada de la pandemia la presencialidad de las clases seguirá un modelo híbrido en la que la mitad de la clase se irá alternando de forma presencial y remota. En cualquiera de las dos modalidades será necesaria una asistencia de, al menos, un 80%, tanto en el turno presencial como telemático, para que el alumno sea evaluado por evaluación continua.

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 intercalarán 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 califcación.

Se van a realizar 3 proyectos secuenciados que cubran los contenidos que estemos trabajando

Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)

No están contempladas

Siguiendo las instrucciones 20-21 de 16/07/20, 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 teóricas

No están contempladas

Actividades prácticas
  • Desarrollo de las estructuras de datos de manera correcta y lógica en HTML. 
  • Calidad del código y de la sintaxis según los estándares HTML5. 
  • Desarrollo visual para diferentes dispositivos en CSS.
  • Calidad del código y sintaxis según los estándares CSS3 
  • Entrega y desarrollo sistemático en el sistema de control de versiones GIT. 
  • Calidad y acierto en la implemenación de mockups previamente diseñados en código.
Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)

No están contempladas

9.2 Criterios de evaluación
Actividades teóricas

No están contempladas

 

Actividades prácticas
  • Proyecto 1. Creación de UI y mockup    30%
  • Proyecto 2: Recreación de una UI y maquetación    30%
  • Proyecto 3: Proyecto personal    40%

En el caso de que el alumno pierda la evaluación continua, y sea evaluado en convocatoria ordinaria o extraordinaria, no se tendrán en cuenta los trabajos prácticos realizados durante el curso

Otras actividades formativas de carácter obligatorio (jornadas, seminarios, etc.)

No están contempladas

 

9.3 Criterios de calificación
9.3.1 Ponderación de los instrumentos de evaluación para la evaluación continua
Prácticas guiadas
60%
Proyectos personales
40%
Actitud y participación activa
0%
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
Pruebas escritas
0%
Pruebas prácticas
100%
9.3.3 Ponderación de instrumentos de evaluación para la evaluación extraordinaria y duración de la prueba
Pruebas escritas
0%
Pruebas prácticas
100%
9.3.4 Ponderación para la evaluación de estudiantes con discapacidad
Prácticas guiadas
60%
Proyectos personales
40%
Actitud y participación activa
0%
10. Planificación temporal de los contenidos, metodología docente y evaluaciones. Cronograma
Semana 1
Bloque temático
Iniciación
Tema / repertorio
HTML básico
Actividades teóricas
Metodología
teórica
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
21CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 2
Bloque temático
Iniciación
Tema / repertorio
CSS básico
Actividades teóricas
Metodología
teórica
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
21CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 3
Bloque temático
Iniciación
Tema / repertorio
Maquetación con CSS-Grid y Flexbox. Box model props
Actividades teóricas
Metodología
teórica
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
21CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 4
Bloque temático
Iniciación
Tema / repertorio
Tipografía digital y tipografía en web
Actividades teóricas
Metodología
teórica
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
21CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 5
Bloque temático
Desarrollo estratégico
Tema / repertorio
Preprocesadores CSS
Actividades teóricas
Metodología
teórica
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
21CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 6
Bloque temático
Desarrollo estratégico
Tema / repertorio
Clases abstractas y clases modificadoras
Actividades teóricas
Metodología
teórica
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
21CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 7
Bloque temático
Responsive web design
Tema / repertorio
HTML básico
Actividades teóricas
Metodología
teórica
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
21CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 8
Bloque temático
Proyecto propio
Tema / repertorio
Proyecto propio
Actividades teóricas
Metodología
teórica
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
21CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
Semana 9
Bloque temático
Proyecto propio
Tema / repertorio
Proyecto propio
Actividades teóricas
Metodología
teórica
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
21CG Organizar, dirigir y/o coordinar equipos de trabajo y saber adaptarse a equipos multidisciplinares
11. Recursos y materiales didácticos
Bibliografía general
Inclusive design patterns, Pickering, Heyden, Editorial Smashing Magazine, 2016
Hardboiled Webdesign, Clarke, Andy, Editorial Smashing Magazine, 2016
Taming CSS Complexity, Varios autores, Editorial Smashing Magazine, 2016
Bibliografía complementaria
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.