Enseñanzas Artísticas Superiores de Diseño (Curso )

(1)

1

Enseñanzas Artísticas

Superiores de Diseño

(Curso 2014-2015)

Guía docente de

Diseño interactivo y desarrollo de aplicaciones

en HTML5

(2)

Enseñanzas Artísticas Superiores de Diseño

Guía docente de la asignatura Diseño interactivo y desarrollo de aplicaciones en HTML5

Profesores

Apellidos y nombre

Distribución de tareas/grupos… (si procede)

Vázquez Zapata, Ignacio

DG4

Coordinador de la asignatura

Apellidos y nombre

Vázquez Zapata, Ignacio

I.- Identificación de la asignatura

Tipo Optativa específica

Materia Tecnología aplicada al diseño gráfico

Especialidad Diseño Gráfico

Periodo de impartición Curso 4º / 1º semestre Nº Créditos

Departamento Ciencia, Materiales y Tecnología del Diseño

Idioma/s Español

II.- Presentación

Los dispositivos móviles y sus aplicaciones han cambiado nuestro mundo, en estos momento surge un nuevo entorno, que permite desarrollar aplicaciones para teléfonos y tabletas directamente en HTML5, y con esto se espera que lo cambie mucho mas.

Su enorme potencial para simplificar el desarrollo, permitiendo emplear las tecnologías de la Web para desarrollar aplicaciones como son el HTML, CSS y Javascript, lenguajes próximos a las conocimientos de los diseñadores.

La naturaleza abierta de HTML5 y el uso de software libre, ha conseguido el apoyo de grandes empresas. Este curso está diseñado como una introducción a HTML5, CSS3 y Javascript y a su uso para diseñar aplicaciones para móviles.

Este curso, está basado en la realización de ejercicios que introducen nuevos conceptos relacionados con la programación, el diseño gráfico y la experiencia de usuario. El alumno debe ir enriqueciendo estos ejemplos y publicando sus desarrollos en Internet. Los ejemplos cubren los casos más representativos de las aplicaciones actuales.

(3)

3 de aplicaciones para dispositivos móviles.

Requisitos previos y recomendaciones

Es aconsejable haber superado las asignaturas de Fundamentos científicos del diseño, Tecnología digital, Tecnología digital Gráfica, de primer curso. Tecnología interactiva. Usabilidad y Tecnología interactiva. Producción, de segundo curso, Gráfica multimedia. Producción y Gráfica multimedia. Programación de tercer curso.

El curso está pensado para principiantes, aunque se recomienda que los asistentes al curso tengan nociones básicas de creación de páginas Web y programación, Si alguna persona no tuviese estos conocimientos previos, puede compensarlo con un sobre-esfuerzo.

III.- Competencias

Competencias transversales

1CT Organizar y planificar el trabajo de forma eficiente y motivadora.

2CT Recoger información significativa, analizarla, sintetizarla y gestionarla adecuadamente.

3CT Solucionar problemas y tomar decisiones que respondan a los objetivos del trabajo que se realiza. 4CT Utilizar eficientemente las tecnologías de la información y la comunicación.

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.

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.

9CG Plantear, evaluar y desarrollar estrategias de aprendizaje adecuadas al logro de objetivos personales y

profesionales.

10CG Optimizar la utilización de los recursos necesarios para alcanzar los objetivos previstos.

12CG 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.

13CG Dominar la metodología de investigación.

14CG Analizar, evaluar y verificar la viabilidad productiva de los proyectos, desde criterios de innovación

(4)

Competencias específicas

1CEG Generar, desarrollar y materializar ideas, conceptos e imágenes para programas comunicativos

complejos.

3CEP Proponer, evaluar y determinar soluciones alternativas a problemas complejos de diseño de productos

y sistemas.

4CEP Valorar e integrar la dimensión estética en relación al uso y funcionalidad del producto.

8CEG Conocer los canales que sirven de soporte a la comunicación visual y utilizarlos conforme a los objetivos

comunicacionales del proyecto.

11CEG Dominar los recursos tecnológicos de la comunicación visual.

12CEG Dominar la tecnología digital para el tratamiento de imágenes, textos y sonidos.

15CEG Reflexionar sobre la influencia social positiva del diseño, valorar su incidencia en la mejora de la

calidad de vida y del medio ambiente y su capacidad para generar identidad, innovación y calidad en la producción.

Otras competencias específicas

CEG1 Diseñar la gráfica y la usabilidad, definir la estructura de las aplicaciones móviles. CEG2 Gestión y desarrollo de un proyecto con Git y Github

CEG3 Conocer El lenguaje de programación Java Script y la codificación CSS3 - HTML5 CEG4 Conocer y manejar las herramientas de simulación, depuración y pruebas

CEG5 Manejar los compiladores de aplicaciones: Phone Gap.

CEG6 Conocer los modos de publicación y distribución de aplicaciones, Envío y distribución de aplicaciones

IV.- Contenido

IV. A. Temario de la asignatura

Bloque temático

Tema

Apartados

I.- HTML5 y CSS3

Tema 1. HTML5 Nuevas etiquetas de estructura HTML5 @fonts, video y audio Canvas

Tema 2. CSS3

Nuevas etiquetas CSS3 Selectores CSS

Diseño responsivo/adaptativo II. Control de versiones Tema 3. Gestión y desarrollo de _{un proyecto} Herramientas Git y GitHub

III.- JavaScript Tema 4 El lenguaje JavaScript

Tipos, objetos y valores. Sentencias y variables

Strings. Objetos de la clase Object. Sentencia for/in. boolean, igualdad y sentencia if/else

DOM - Document Object Model Funciones. Funciones como objetos Eventos. Eventos tactiles

(5)

5

CANVAS

Tema 5 La API del teléfono

los sensores del teléfono. El almacenamiento en cliente:

localStorage, sessionStorage, e indexed DB.

Tema 6. Ux en aplicaciones móviles

Dominar los recursos tecnológicos de la comunicación visual en dispositivos móviles.

Conocer los fundamentos de diseño de interfaz gráfico y la experiencia de usuario

IV Compilador Tema 7. PhoneGap Depuración de aplicaciones. _{Publicación de una Packaged App}

IV. B. Actividades obligatorias (evaluables):

Tipo de actividad:

Trabajos teóricos

Ejercicios prácticos resueltos en clase

Ejercicios prácticos realizados de manera independiente por el alumno - Proyectos

V.- Tiempo de trabajo

HORAS

Clases teóricas (a) 30 horas

Clases prácticas (a) 50 horas

Actividades obligatorias (evaluables) (a) 40 horas

Realización de pruebas (a) Otras tareas lectivas (a) Atención a alumnos (b) Actividades relacionadas: (b)

Preparación del alumno para clases teóricas (c) 30 horas

Preparación del alumno para clases prácticas (c) 50 horas

Preparación del alumno para realización de pruebas (c) 100 horas

Otras (indicar a, b, c)

Total de horas de trabajo del estudiante (d) 300 horas

(a): docencia directa: horas lectivas con el profesor (b): horas complementarias con/sin profesor (c): trabajo autónomo del alumno

(6)

VI.- Metodología

Las actividades expositivas cumplen la función de vertebrar el proceso de aprendizaje del alumno. Es

aconsejable que los alumnos lean antes los documentos y recursos facilitados por el profesor a través del aula virtual. Esto facilita la participación de los alumnos durante la explicación. El profesor media en este proceso de reelaboración y no tanto en transmisor de información.

En las actividades teórico practicas los alumnos seguirán paso a paso las explicaciones del profesor interpretando sus trabajos con sus propios elementos gráficos.

El trabajo con los contenidos prácticos son las actividades más relevantes también en su influencia en la evaluación que el estudiante ha de desarrollar de manera individual. Dicho trabajo implica realizar dos prácticas experimentales y, una vez finalizada cada práctica, comprobar que se han adquirido las destrezas y habilidades necesarias en esta materia. 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.

VII.- Cronograma (incluido en las últimas páginas de este documento)

VIII.- Criterios e instrumentos de evaluación y calificación

VIII. A. Instrumentos para la evaluación

El instrumento de evaluación serán los ejercicios prácticos entregados, que el alumno demuestre sus destrezas en la realización del ejercicio y que ha adquirido las competencias de la asignatura y aplicar lo aprendido a una variedad de situaciones. Para ello se valorara el ejercicio cotejando los puntos que registra la ausencia o presencia de un determinado rasgo sacados de los documentos y explicaciones de las clases teóricas.

También se valora la asistencia el grado de participación en clase mediante una escala de estimación: • Sugiere ideas, propone recursos y trabaja al máximo 7 a 10

• Trabaja y propone recursos pero no toma la iniciativa 4 a 7 • Hace lo menos posible en el desarrollo de la actividad 0 a 4

VIII. B. Criterios de evaluación

La evaluación de la asistencia el grado de participación pretende considerar el trabajo continuo realizado por los alumnos y que consiste básicamente en estudiar la documentación del tema previamente a su

presentación en clase en las clases teóricas. Asistencia y seguimiento de las prácticas guiadas y su realización en las clases teórico prácticas.

Evaluación de los ejercicios prácticos entregados.

Para los alumnos que no hayan superado la asignatura tendrán que realizar un examen final para superar la asignatura que constará de dos pruebas:

• Prueba teórica • Ejercicio práctico

La participación activa no afectará a la posibilidad de superar la asignatura en el examen final.

VIII. C. Criterios de calificación

(7)

7

Los alumnos serán evaluados, con carácter general, de acuerdo con el siguiente criterio: • Participación activa 20%

• Ejercicios prácticos: 80%. El examen final se evaluará de 0 a 10

• Prueba teórica de 0 a 3 • Ejercicio práctico de 0 a 7

VIII. C.1 Ponderación para la evaluación continua

Porcentaje orientativo de asistencia a clase: 70% .

Instrumentos Tipo Ponderación Periodo de _realización Bloque _temático

Prácticas Liberatoria Reevaluable 80 Semana _8/14/17 todos

Asistencia a clase Acumulativa 20 Semana 1

a 17 todos

Total ponderación 100%

VIII. C.2 Ponderación para la evaluación de alumnos con reducción autorizada del porcentaje

previsto de presencialidad.

Instrumentos Ponderación Periodo de _realización Bloque temático

Pruebas escritas 30% Semana 17 todos

Prácticas 70% semana 17 todos

Modifíquense o elimínense los datos según proceda.

VIII. C.3 Ponderación para la evaluación de alumnos con pérdida de evaluación continua

Prácticas 70% semana 17 todos

VIII. C.4 Ponderación para la evaluación extraordinaria.

(8)

Pruebas prácticas 70% semana 17 todos

VIII. C.5 Ponderación para la evaluación de alumnos con discapacidad

Pruebas prácticas 70% semana 17 todos

IX.- Recursos y materiales didácticos

Para conocer los recursos y materiales didácticos, visita el Aula virtual de la asignatura, para mayor información: aula.esdmadrid.es

IX. A. Bibliografía general

Se recomienda que el número total de referencias bibliográficas incluidas en este documento sea el imprescindible. El resto podrá incluirse en el aula virtual.

Título El gran libro de HTML5, CSS3 y Javascript

Autor Gauchat, J.D. Editorial Marcombo 2011

Título PhoneGap

Autor Myer, Thomas

Editorial Ed Anaya Multimedia 2012

Título DESARROLLO DE APLICACIONES EN LA NUBE PARA DISPOSITIVOS MOVILES

Autor RICHARD RODGER

Editorial Anaya Multimedia 2012

IX. B. Bibliografía complementaria

Título Javascript: la guía definitiva

Autor Flanagan, David

(9)

9 Título Diseñando apps para móviles

Autor Cuello. Javier. Vittone, José Editorial Catalina Duque Giraldo 2013

Título Building Android Apps with HTML, CSS, and JavaScript

Autor Stark, Jonathan

Editorial O’Reilly Production Services 2012

IX. C. Direcciones web de interés

Dirección 1 HTML5 Spain: http://html5spain.wordpress.com/ Dirección 2 Mozilla https://marketplace.firefox.com/developers/?menu Dirección 3 PhoneGap http://phonegap.com/

IX. D. Otros materiales y recursos didácticos

Asistencia presencial o seguimiento virtual a Hackathones, SIG, Conferencias, festivales, ferias y Congresos, que se celebren durante el periodo lectivo

Mobile World Congress 2014

http://www.mobileworldcongress.com/ Ars Electronica

http://www.aec.at/news/ Conferencias TED y TEDx http://www.ted.com/ Art Futura http://www.artfutura.org/v2/ CES http://www.cesweb.org/

X.- Profesorado

Rellenar una tabla por cada profesor implicado en la asignatura

Nombre y apellidos

Ignacio Vázquez Zapata

Horario de atención a alumnos (si procede)

Correo electrónico

[email protected]

Departamento

Tecnológico

Categoría

Profesor de APyD

Titulación Académica

Licenciado Documentación

Experiencia

docente/profesional/investigadora relacionada con la asignatura

Sociedad de la Información, Visualización y topologías

de la Interacción

(10)

XI. Información sobre la asignatura en cursos anteriores

Esta asignatura no se ha cursado en años anteriores.

(11)

11

Cronograma

Semanas 1 a 9

ASIGNATURA: Diseño interactivo y desarrollo de aplicaciones para

dispositivos móviles en html5 CURSO: 4º

SEMESTRE: 1 semestre ESPECIALIDAD: Gráfico

PROFESOR/A: Ignacio Vázquez Zapata

SEMANA 1 2 3 4 5 6 7 8 9

BLOQUE I.- HTML5 y CSS3 III.- Java Script

TEMA 1. HTML5 2. CSS3 3 Gestión de

proyectos 4 El lenguaje Java Script

5 La API del teléfono ACTIVIDAD Estructura con _{etiquetas HTML5}

Estructura flotante y posiciones absolutas Tipografía, menús, transiciones Instalación y uso

de Git y gitHub Evento y funciones Eventos táctiles SVG - Scalable Vector Graphics, CANVAS Sensores

METODOLOGÍA

Seguimiento guiado paso a paso de simulaciones prácticas y entrega de simulación personalizada Seguimiento guiado paso a paso de simulaciones prácticas y entrega de simulación personalizada Seguimiento guiado paso a paso de simulaciones prácticas y entrega de simulación personalizada Seguimiento guiado paso a paso de simulaciones prácticas y entrega de simulación personalizada Seguimiento guiado paso a paso de simulaciones prácticas y entrega de simulación personalizada

Resolución de ejercicios de modo independiente del alumno Seguimiento guiado paso a paso de simulaciones prácticas y entrega de simulación personalizada COMPETENCIAS 2CT, 3CT, 4CT, _{15CT. 10CG} 2CT, 3CT, 4CT, 15CT. 10CG, 12CEG 2CT, 3CT, 4CT, 15CT. 10CG, 12CEG, CEG1 2CT, 3CT, 4CT, 15CT, 9CT, 10CG, 12CEG, CEG1 2CT, 3CT, 4CT, 15CT. 10CG, CEG2 1CT, 2CT, 3CT, 4CT, 9CT, 12CT, 14CT, 15CT, 9CG, 10CG, 1CEG, 11CEG, 12CEG, CEG2

2CT, 3CT, 4CT, 15CT. 10CG, CEG1, CEG2

(12)

Cronograma

Semanas 10 a 18

ASIGNATURA: CURSO:

SEMESTRE: ESPECIALIDAD:

PROFESOR/A:

SEMANA 10 11 12 13 14 15 16 17 18

BLOQUE II.- Java Script III.- Compilador

TEMA 5 La API del _teléfono 6 Ux en aplicaciones móviles

7. PhoneGap

ACTIVIDAD Almacenamiento _{y API's} Elementos _{gráficos y Ux} Aplicación, entorno de desarrollo y pruebas Aplicación, publicación

METODOLOGÍA Seguimiento guiado paso a paso de simulaciones prácticas y entrega de simulación personalizada Seguimiento guiado paso a paso de simulaciones prácticas y entrega de simulación personalizada

Resolución de ejercicios de modo independiente del

alumno Resolución de ejercicios de modo independiente del alumno

COMPETENCIAS 2CT, 3CT, 4CT, _{15CT. 10CG, v} 2CT, 3CT, 4CT, 15CT. 10CG . 4CEP, 12CEG, CEG1, CEG2 1CT, 2CT, 3CT, 4CT, 9CT, 12CT, 14CT, 15CT, 2CG, 9CG, 10CG, 12CG, 13CG, 14CG, 1CEG. 3CEP, 4CEP, 8CEG, 11CEG, 12CEG, 15CEG, CEG1, CEG2, CEG3, CEG4

1CT, 2CT, 3CT, 4CT, 9CT, 12CT, 14CT, 15CT . 1CG, 2CG, 9CG, 10CG, 12CG, 13CG, 14CG, 1CEG, 3CEP, 4CEP, 8CEG, 11CEG, 12CEG, 15CEG, CEG1, CEG2, CEG3, CEG4, CEG5