Programación para Diseñadores y artistas visuales | Gestión de guías docentes / 2021-22

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

Número de horas totales

100

Número de horas presenciales

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

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.

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

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 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 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

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

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

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

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

Direcciones web de interes

w3schools - W3C official tutorial

Smashing Magazine

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.