Información general


  • Tipo de asignatura: Obligatoria
  • Coordinador: Maddalena Fedele
  • Trimestre: 1
  • Créditos: 4
  • Profesorado:

Idiomas de impartición


  • Català

Descripción


La asignatura "Sistemas Multimedia" abre la materia Multimedia dentro del plan de Estudios del "Grado en Medios Audiovisuales". En esta asignatura se inicia el conocimiento de los lenguajes de representación de la información (HTML) y diseño de la presentación (CSS) para aplicaciones web. El objetivo principal de la asignatura es capacitar al estudiante para la creación, edición, diseño y maquetación de aplicaciones web estáticas usando los lenguajes estándares en la web. Se trabajan los medios siguientes: texto, imagen fotográfica y vectorial (dibujos), el audio y el vídeo. La interacción se trabaja sólo a nivel de navegación (hipermedia).

Esta asignatura tiene su continuación en la asignatura del segundo trimestre "Fundamentos de Programación" en la que se inicia en el uso del lenguaje de programación javascript para aumentar la interactividad de la aplicación web.

Resultados de aprendizaje


A nivel general, esta asignatura contribuye a los siguientes resultados de aprendizaje (RA) especificados para la materia a la que pertenece (Multimedia):

  • (RA1) usar los servicios web ftp y www.
  • (RA2) saber aplicar las características y formatos más adecuados de los diferentes medios digitales que integran una producción multimedia: texto, imagen, sonido y vídeo.
  • (RA3) saber aplicar correctamente los lenguajes de representación de información en la web HTML y CSS.
  • (RA4) saber editar imágenes fotográficas y dibujos vectoriales con software profesional y decidir el formato para la publicación en la web.
  • (RA5) crear, editar, publicar y mantener sitios web multimedia básicos siguiendo patrones de diseño actuales para conseguir un grado elevado de usabilidad y accesibilidad.

 


 

Metodologia de trabajo


Las horas de aprendizaje dirigido consisten:

  • clases teóricas (grupo grande) en las que el profesorado hace una exposición para introducir los objetivos de aprendizaje generales de los contenidos correspondientes. Convenientemente intercalado y sin previo aviso, se realizan actividades de seguimiento individuales o en grupo, dentro de la clase. Estas actividades suelen ser pequeños problemas o ejercicios de comprensión de los contenidos que se están presentando. El alumno dispone y utiliza, como material de apoyo, los apuntes de la asignatura que el profesorado pone a su disposición desde el primer día, tanto en formato impreso como en el campus virtual. Esto, permitirá al alumno ir a clase habiendo hecho una lectura previa de los temas y, en clase, concentrarse en las explicaciones del profesor, tomando las notas que crea oportunas para un estudio posterior. La dedicación por parte del estudiante será: 3h/set. x 10 set. = 30 horas totales.
  • prácticas (grupo pequeño), en laboratorios que disponen de los equipamientos necesarios para la realización de la misma, básicamente, ordenadores. Los alumnos se agrupan de dos en dos y comparten el equipamiento. La dedicación por parte del estudiante será: 1h/set. x 10 set. = 10 horas totales.

Adicionalmente, están contempladas unas actividades dirigidas que consisten en explicaciones, más o menos personalizadas, de las correcciones de las diferentes actividades realizadas por los estudiantes, básicamente, los exámenes parciales y las prácticas. La dedicación por parte del estudiante será 5 horas, aproximadamente.

Dentro de las horas de aprendizaje autónomo se consideran las horas que el alumno dedica a hacer una lectura previa de los apuntes para la clase teórica correspondiente, realización de ejercicios y trabajos propuestos fuera del aula, estudio de manuales necesarios para poder hacer las prácticas, redacción de los informes de las prácticas y trabajos, resolución de cuestionarios de autoaprendizaje, estudio y preparación de los exámenes parciales, etc. La dedicación por parte del estudiante será 40 horas totales, aproximadamente.

Contenidos


Título contenido 1: Conceptos básicos de la multimedia.

Descripción:

En este contenido se trabaja:

1.1. Definiciones.
1.2. Representación d ela información en el ordenador.
1.3. La red Internet.
1.4. Servicios en Internet: FTP i WWW.
1.5. Sitio web vs aplicación web.
1.6. Fases de un proyecto multimedia

Actividades vinculadas:

Actividad 4: Examen primer parcial.
Actividad 6: Examen final.
 

Título contenido 2: Multimedia en el World Wide Web.

Descripción:

En este contenido se trabaja:

2.1. Desarrollo de sitios web: administración local y remota del sitio web.
2.2. El lenguaje HTML para la información multimèdia (contenidos).
2.3. Añadiendo texto.
2.4. Añadiendo imágenes.
2.5. Navegación hipermedia: los vínculos.
2.6. Las tablas.
2.7. El lenguaje CSS para el disseño (presentación).
  2.7.1. Los selectores.
  2.7.2. ¿Donde se coloca el CSS?
  2.7.3. ¿Cómo se propagan los estilos?
2.8. Propiedades del texto y de las fuentes.
2.9. CSS3.

Actividades vinculadas:

Actividad 1. Práctica de creación y publicación de páginas web.
Actividad 4: Examen primer parcial.
Actividad 6: Examen final.
 

Título contenido 3: Imagen, audio y vídeo en la web.

Descripción:

En este contenido se trabaja:

3.1. El color: naturaleza, modelos RGB, CMYK y HSV.
3.2. Características de las imágenes fotográficas: profundidad de color, resolución y peso del archivo.
3.3. Propiedades de los algoritmos de compresión: RLE, LZW y JPEG.
3.4. Características de los formatos de archivo: GIF, JPG y PNG. Optimización.
3.5. Características de las imágenes vectoriales (dibujos).
3.6. Introducción al formato SVG.
3.7. Incorporación de audio.
3.8. Incorporación de vídeo.

Actividades vinculadas:

Actividad 2. Práctica de edición fotográfica y vectorial.
Actividad 5: Examen final.
 

Título contenido 4: Maquetación web.

Descripción:

En este contenido se trabaja:

4.1. Concepto de interfaz gráfica de usuario (GUI).
4.2. Tecnologías para la creación de la interfaz gráfica: capas con CSS.
4.3. Patrón de los 3 paneles.
4.3.1. Creación del menú de navegación horizontal y vertical.
4.4. Patrón de página única (Bootstrap).
4.4.1. Creación del menú.
4.4.2. Elementos interactivos: carrusel de fotografias.

Actividades vinculadas:

Actividad 3. Práctica de maquetación web.
Actividad 5: Examen final.

Actividades de aprendizaje


Con el objetivo de recoger evidencias del logro de los resultados de aprendizaje esperados se realizarán 5 actividades con carácter de evaluación:

Para superar (aprobar) las actividades evaluadoras, los estudiantes deberán demostrar:

  • Que han adquirido los conocimientos teóricos relativos a los contenidos de la asignatura y que su comprensión les permite llevarlos a la práctica [MECES-2 punto a, punto c]
  • Que pueden desarrollar soluciones a problemas que, si bien similares a otros vistos anteriormente, presentan aspectos que son nuevos [MECES-2 punto f]

En relación a la competencia básica asignada a la asignatura, ésta queda cubierta especialmente en cuanto a los aspectos que se explicitan:

  •     G5 (desarrollo de habilidades de aprendizaje necesarias para estudios posteriores). Los estudiantes deben demostrar:
    • que son capaces de acceder de forma autónoma a la documentación complementaria que se les da: guías de usuario del software necesario para hacer las prácticas, tutoriales de referencia, etc.
    • que han adquirido unos hábitos de trabajo efectivos, sabiendo analizar el problema que deben resolver, acceder a las fuentes de documentación necesarias, y aplicar soluciones técnicas avanzadas.
    • que identifican correctamente cuáles son los aspectos de aprendizaje más relevantes de la asignatura, los cuales serán imprescindibles para afrontar asignaturas posteriores con éxito.

Todas las actividades de la asignatura contribuyen al logro progresivo de la competencia específica de la asignatura, más concretamente, en los siguientes aspectos:

  •     E1: Diseñar las interfaces gráficas de portales web estáticos, siguiendo criterios de usabilidad y accesibilidad.

 

Título de la actividad 1: Práctica de creación y publicación de páginas web.

Descripción general:

Con esta práctica el estudiante aprende a crear un sitio web del tipo portfolio personal. Se usará la aplicación mobirise (https://mobirise.com/es/) para la creación del portal, para que el alumno focalice su atención en la estructura de la web y en los contenidos que quiere presentar. El portal sólo contendrá texto e imágenes de elaboración propia. En esta primera práctica, el alumno no modifica el HTML ni el CSS directamente, cualquier cambio se hace a través de la aplicación.
Será objetivo de la práctica, publicar el sitio web en el servidor web de la escuela usando ftp. Se usará el software Adobe Dreamweaver (https://www.adobe.com/es/products/dreamweaver.html) o Filezila (https://filezilla-project.org/) para la transferencia de los archivos.

Material de soporte:

Guión de prácticas (disponible en el campus digital y en la web de la asignatura).
Guía de usuario de Adobe Dreamweaver.

Entregable y vínculos con la evaluación:

Hay que entregar:

• un fichero .zip con todos los ficheros necesarios para confeccionar la página web. Es necesario, por tanto, comprimir en un único archivo la estructura de carpetas y archivos del sitio local creado con mobirise.
• un documento texto (.pdf) donde se explica las incidencias al hacer la práctica: ¿cuánto tiempo ha llevado hacerla?, ¿ha sido fácil o no?, ¿qué es lo que ha sido más difícil?, ¿qué mejorarías?, ...

Todos estos documentos se colocarán en el buzón del eCampus

La página web debe estar publicada en el sitio web personal del alumno en el servidor web de la Escuela, ssh.eupmt.tecnocampus.cat.

El resultado de la actividad tendrá una ponderacióndel 7.5% respecto a la calificación final.

Objetivos específicos:

Al finalizar la actividad el estudiante debe ser capaz de:

• crear un proyecto (sitio web) con Mobirise.
• maquetar con la estructura de portafolio.
• incorporar imágenes con el formato adecuado.
• publicar el proyecto al servidor web.

Vinculación con los resultados de aprendizaje y competencias de la asignatura:

  • Esta actividad es una evidencia de los resultados de aprendizaje: RA1, RA2 y RA5.
  • Esta actividad contribuye al logro de la competencia específica E1.

 

Título de la actividad 2: Práctica de edición fotográfica y vectorial.

Descripción general:

Con esta práctica el estudiante aprende a trabajar con un programa de edición de imágenes para la creación de logotipos y cabeceras de la página web. Se trabajará la técnica de la agrupación formando máscaras que permitirá fusionar dos imágenes diferentes en una sola. También utilizaremos los filtros para crear efectos especiales a las imágenes. Aprenderemos a trabajar con capas. El estudiante creará el logotipo y la portada de su página personal iniciada en la actividad 1.

Material de soporte:

Listado de tutoriales de referencia que se pueden encontrar en la web.

Guía de usuario de Adobe Photoshop (https://www.adobe.com/es/products/photoshop.html) y Adobe Illustrator (https://www.adobe.com/es/products/illustrator.html) .

Entregable y vínculos con la evaluación:

Hay que entregar:

• un fichero .zip con todos los archivos en formato .psd o .ai que contienen el logotipo y la portada diseñada para su página personal.
• un documento texto (.pdf) donde se explica las incidencias al hacer la práctica: ¿cuánto tiempo ha llevado hacerla?, ¿ha sido fácil o no?, ¿qué es lo que ha sido más difícil?, ¿qué mejorarías?, ...

Todos estos documentos se colocarán en el buzón del eCampus.

Hay que incorporar y publicar el logotipo y la portada, con el tipo de archivo adecuado (.gif, .jpg, .png), en la web personal del alumno.

El resultado de la actividad tendrá una ponderacióndel 7.5% respecto a la calificación final.

Objetivos específicos:

Al finalizar la actividad el estudiante debe ser capaz de:

• crear un fotomontaje mezclando diferentes imágenes.
• aplicar máscaras con bordes difuminados para fusionar dos imágenes.
• trabajar con capas
• aplicar filtros a las imágenes
• decidir el formato de archivo más adecuado para la imagen para la publicación web.

Vinculación con los resultados de aprendizaje y competencias de la asignatura:

  • Esta actividad es una evidencia de los resultados de aprendizaje: RA4.
  • Esta actividad contribuye al logro de la competencia específica E1 y a evaluar la competencia básica G5.

 

Título de la actividad 3: Práctica de maquetación web.

Descripción general:

Con esta práctica el estudiante aprende a crear una interfaz gráfica de usuario para su página personal que implemente el patrón de página única (Bootstrap). La práctica ha de incorporar elementos interactivos: carrusel de fotografias, imágenes que giren cuando el ratón esté encima de la imagen, etc. Adicionalmente, la pràctica deberá incorporar elementos audiovisuales. Esta práctica será una segunda versión de la actividad 1, incorporando muchos elementos, en especial, la aplicación de estilos en cuanto al color y la tipografía. En esta práctica sí se hace énfasis en la estructura semántica del HTML y el grado de personalización del diseño con un CSS propio.

Material de soporte:

Guión de prácticas (disponible en el campus digital y en la web de la asignatura).

Guía de usuario de Adobe Dreamweaver.

Guía de usuario Manual de Adobe Photoshop.

Entregable y vínculos con la evaluación:

Hay que entregar:

• un documento texto (.pdf) donde se explica las incidencias al hacer la práctica: ¿cuánto tiempo ha llevado hacerla?, ¿ha sido fácil o no?, ¿qué es lo que ha sido más difícil?, ¿qué mejorarías?, ...

Hay que explicitar las decisiones en cuanto a los estilos utilizados: ¿por qué estos colores?, ¿por qué esta tipografía?, etc.
Este documento se colocarà en el buzón del eCampus.

Hay que publicar la web en el servidor web de la escuela en el espacio reservado al alumno.

El resultado de la actividad tendrá una ponderacióndel 15% respecto a la calificación final.

Objetivos específicos:

Al finalizar la actividad, el estudiante debe ser capaz de:

• crear una página HTML maquetada con Bootstrap.
• decidir el estilo adecuado a la publicación en la web en cuanto a la gama de colores y tipografía a emplear, utilizando CSS.
• incorporación de elementos interactivos.
• incorporación de audio y video.

Vinculación con los resultados de aprendizaje y competencias de la asignatura:

  • Esta actividad es una evidencia de los resultados de aprendizaje: RA1, RA2, RA3 y RA5.
  • Esta actividad contribuye al logro de la competencia específica E1.

 

Título de la actividad 4: Examen parcial.

Descripción general:

Se realiza un examen donde se evalúa los conocimientos de los contenidos 1 y 2. Esta prueba consta de una parte de cuestiones sobre conceptos asociados a los objetivos de aprendizaje de la asignatura en cuanto al conocimiento y comprensión, y de un conjunto de ejercicios de aplicación. El estudiante dispone de 2 horas para la realización de la prueba dentro de su horario habitual de clase. Una vez realizado el examen, el profesor explicará la resolución al grupo.

Material de soporte:

Enunciado de la prueba.

Entregable y vínculos con la evaluación:

Resolución de la prueba.

El resultado de la actividad tendrá una ponderacióndel 21% respecto a la calificación final.

Vinculación con los resultados de aprendizaje y competencias de la asignatura:

  • Esta actividad es una evidencia de los resultados de aprendizaje: RA2 y RA3.
  • Esta actividad contribuye al logro de la competencia específica E1.

 

Título de la actividad 5: Examen final.
 
Descripción general:

Se realiza un único examen final donde se evalúa los conocimientos de los contenidos 1, 2, 3 y 4 . Esta prueba consta de una parte de cuestiones sobre conceptos asociados a los objetivos de aprendizaje de la asignatura en cuanto al conocimiento y comprensión, y de un conjunto de ejercicios de aplicación. El estudiante dispone de 3 horas para la realización de la prueba en el periodo de exámenes finales establecido por el Jefe de estudios. Una vez realizado el examen, el profesor publicará la resolución.

Material de soporte:

Enunciado de la prueba.

Entregable y vínculos con la evaluación:

Resolución de la prueba.

El resultado de la actividad tendrá una ponderacióndel 49% respecto a la calificación final.

Vinculación con los resultados de aprendizaje y competencias de la asignatura:

  • Esta actividad es una evidencia de los resultados de aprendizaje: RA1, RA2, RA3 y RA5.
  • Esta actividad contribuye al logro de la competencia específica E1.

 

Sistema de evaluación


La calificación final se obtiene de la siguiente ponderación de las calificaciones parciales:

NotaFinal = 0.7 NotaTeoría + 0.3 NotaPrácticas

NotaPrácticas se obtiene con la media aritmética de las tres actividades de carácter práctico realizadas durante el curso. La actividad 3 pondera el doble que las otras actividades prácticas.

La NotaTeoría se obtiene con la realización de dos exámenes,
                  NotaTeoría = 0.3 NotaParcial + 0.7 NotaExamen_Final

En el NotaParcial_1 evalúa los conocimientos de los contenidos 1 y 2. Esta prueba tienen una duración de 1.5h y se realizan dentro del horario de clase, a mitad de trimestre (semana 5, aproximadamente).

En el NotaExamen_Final es un único examen donde se evalúa todos los conocimientos de los contenidos de la asignatura. Tendrá una duración de 3 horas, dentro del periodo de exámenes finales que establece el Jefe de Estudios. Se necesita una nota mínima de 5 en éste examen para poder aprobar la asignatura.

Si finalmente, el alumno no ha obtenido una NotaFinal superior o igual a 5.0, el alumno podrá presentarse a un único "Examen de Recuperación" de NotaTeoria (70% de NotaFinal), dentro del periodo de exámenes de recuperación que establece el Jefe de Estudios. Los alumnos que tengan una calificación final de "No Presentado" en la primera convocatoria, no podrán presentarse al examen de recuperación. Se necesita una nota mínima de 5 en éste Examen de Recuperación de la NotaTeoria (75% de la nota de la assignatura) para poder aprobar la asignatura.
 
Normas de realización de las actividades:

Todas las actividades de la asignatura son individuales.

Si no se realiza alguna de las actividades de prácticas, se considerará no puntuada.

Obtendrá una calificación de No presentado a NotaPrácticas si hay alguna actividad de prácticas no puntuadas.

La realización de las actividades prácticas es obligatoria. Es decir, una calificación de No presentado a NotaPrácticas, no permitirá aplicar la ponderación con la NotaTeoría y, por tanto, la calificación final de la asignatura será de "No Presentado".

Bibliografía


Básica

David Sawyer McFarland. CSS3: The missing manual, 3rd Edition. O'Reilly Media. ISBN: 978-1-4493-2594-7

Matthew MacDonald. HTML5: The missing manual, 2nd Edition. O'Reilly Media. ISBN: 978-1-44936-326-0


Complementaria

Daniel D. McCracken and Rosalee J. Wolfe. User-centered web site development: a human-computer interaction approach.Prentice-Hall, 2004. ISBN 0130411612.

Patrick J. Lynch, Ms. Sarah Horton. Web Style Guide. Basic Design Principles for Creating Web Sites. 3rd. 2008. ISBN 978-0-300-13737-8.