104113 - SISTEMES MULTIMÈDIA

Tipus d'assignatura: Obligatòria

Coordinador: Maddalena Fedele

Trimestre: Primer trimestre

Crèdits: 4

Curs acadèmic: 2018

Curs d'impartició: 1

L'assignatura Sistemes multimèdia obre la matèria Multimèdia dins del pla d'Estudis del Grau en Mitjans Audiovisuals. En aquesta assignatura s'inicia el coneixement dels llenguatges de representació de la informació (HTML) i disseny de la presentació (CSS) per a aplicacions web. L'objectiu principal de l'assignatura és capacitar a l'estudiant per a la creació, edició, disseny i maquetació de portals web usant els llenguatges estàndards al web atenent, especialment, a l'accessibilitat i usabilitats dels mateixos. Es treballen els media següents: text, imatge fotogràfica i vectorial (dibuixos), l'àudio i el vídeo. La interacció es treballa només a nivell de navegació (hipermèdia).

Aquesta assignatura té la seva continuació en l'assignatura del segon trimestre Fonaments de Programació en la qual s'inicia en l'ús del llenguatge de programació javascript per augmentar la interactivitat de l'aplicació web.

A nivell general, aquesta assignatura contribueix als següents resultats d'aprenentatge (RA) especificats per a la matèria a la qual pertany (Multimèdia):

• (RA1) usar els serveis web ftp i www.
• (RA2) saber aplicar les característiques i formats més escaients dels diferents mitjans digitals que integren una producció multimèdia: text, imatge, so i vídeo.
• (RA3) saber aplicar correctament els llenguatges de representació d'informació a la web HTML i CSS.
• (RA4) saber editar imatges fotogràfiques i dibuixos vectorials amb programari professional i decidir el format per a la publicació a la web.
• (RA5) crear, editar, publicar i mantenir llocs web multimèdia bàsics seguint patrons de disseny actuals per aconseguir un grau elevat d'usabilitat i accessibilitat.

Les hores d'aprenentatge dirigit consisteixen:

• classes teòriques (grup gran) en les quals el professorat fa una exposició per introduir els objectius d'aprenentatge generals dels continguts corresponents. Convenientment intercalat i sense previ avís, es realitzen activitats de seguiment individuals o en grup, dins la classe. Aquestes activitats acostumen a ser petits problemes o exercicis de comprensió dels continguts que s'estan presentant. Es recomana portar l'ordinador portàtil a classe per poder fer aquestes activitats. L'alumne disposa i utilitza, com a material de suport, els apunts de l'assignatura que el professorat posa a la seva disposició des del primer dia, tant en format imprès com al campus virtual. Això, permetrà a l'alumne anar a classe havent fet una lectura prèvia dels temes i, a classe, concentrar-se en les explicacions del professor, tot prenent les notes que cregui oportunes per a un estudi posterior.
• pràctiques (grup petit), en laboratoris que disposen dels equipaments necessaris per a la realització de la mateixa, bàsicament, ordinadors. Els alumnes s'agrupen de dos en dos i comparteixen l'equipament.

Addicionalment, estan contemplades unes activitats dirigides que consisteixen en explicacions, més o menys personalitzades, de les correccions de les diferents activitats realitzades pels estudiants, bàsicament, els exàmens parcials i les pràctiques.

Dins de les hores d'aprenentatge autònom es consideren les hores que l'alumne dedica a fer una lectura prèvia dels apunts per a la classe teòrica corresponent, realització d'exercicis i treballs proposats fora de l'aula, estudi de manuals necessaris per poder fer les pràctiques, redacció dels informes de les pràctiques i treballs, resolució de qüestionaris d'autoaprenentatge, estudi i preparació dels exàmens parcials, etc.

Títol contingut 1: Conceptes bàsics de la multimèdia

Descripció:

En aquest contingut es treballa:

1.1. Definicions.
1.2. Representació de la informació en l'ordinador.
1.3. La xarxa Internet.
1.4. Serveis a Internet: FTP i WWW.
1.5. Lloc web vs aplicació web.
1.7. Fases d'un projecte multimèdia

Activitats vinculades:

Activitat 4: Examen parcial.
Activitat 5: Examen final.

Títol contingut 2: Multimèdia al World Wide Web.

Descripció:

En aquest contingut es treballa:

2.1. Desenvolupament de llocs web: administració local i remot del lloc web.
2.2. El llenguatge HTML per a la informació multimèdia (continguts).
2.3. Afegint text.
2.4. Afegint imatges.
2.5. Navegació hypermedia: els vincles.
2.6. Les taules.
2.7. El llenguatge CSS per al disseny (presentació).
  2.7.1. Els selectors.
  2.7.2. On es col·loquen els CSS?.
  2.7.3. Com es propaguen els estils?
2.8. Propietats del text i de les fonts.
2.9. CSS3.

Activitats vinculades:

Activitat 1. Pràctica de creació i publicació de pàgines web.
Activitat 4: Examen parcial.
Activitat 5: Examen final.

Títol contingut 3: Imatge, àudio i vídeo al web.

Descripció:

En aquest contingut es treballa:

3.1. El color: naturalesa, models RGB, CMYK i HSV.
3.2. Característiques de les imatges fotogràfiques: profunditat de color, resolució i pes del fitxer.
3.3. Propietats dels algorismes de compressió: RLE, LZW i JPEG.
3.4. Característiques dels formats de fitxer: GIF, JPG i PNG. Optimització.
3.5. Característiques de les imatges vectoritzades (dibuixos).
3.6. Introducció al format SVG.
3.7. Incorporació d'àudio.
3.8. Incorporació de vídeo.

Activitats vinculades:

Activitat 2. Pràctica d'edició fotogràfica i vectorial.
Activitat 5: Examen final.

Títol contingut 4: Maquetació web.

Descripció:

En aquest contingut es treballa:

4.1. Concepte d'interfície gràfica d'usuari (IGU).
4.2. Tecnologies per a la creació de la IGU: capes amb CSS.
4.3. Patró de 3 panells.
  4.3.1. Creació del menú de navegació horitzontal i vertical.
4.4. Patró de pàgina única (llibreria bootstrap).
  4.4.1. Creació de menús.
  4.4.2. Elements interactius; carrusels de fotografies.

Activitats vinculades:

Activitat 3. Pràctica de maquetació web.
Activitat 5: Examen final.

Amb l'objectiu de recollir evidències de l'assoliment dels resultats d'aprenentatge esperats es realitzaran les següents activitats amb caràcter d'avaluació:

Títol de l’activitat 1: Pràctica de creació i publicació de pàgines web.

Descripció general:

Amb aquesta pràctica l'estudiant o estudianta aprèn a crear un lloc web del tipus portfoli personal. S'usarà l'aplicació mobirise (https://mobirise.com/es/) per a la creació del portal, per tal que l'alumne focalitzi la seva atenció en l'estructura del web i en els continguts que vol presentar. El portal només contindrà text i imatges d'elaboració pròpia. En aquesta primera pràctica, l'alumne no modifica l'HTML ni el CSS directament, qualsevol canvi es fa a través de l'aplicació.

Serà objectiu de la pràctica, publicar el lloc web al servidor web de l'escola fent ús de ftp. S'usarà el programari Adobe Dreamweaver (https://www.adobe.com/es/products/dreamweaver.html) o Filezila (https://filezilla-project.org/) per a la transferència dels fitxers.

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA1, RA2 i RA5

Material de suport:

Guió de pràctiques (disponible al campus digital i a la web de l'assignatura).

Guia d'usuari de Adobe Dreamweaver.

Lliuraments i vincles amb l’avaluació:

Cal lliurar:

• un fitxer .zip amb tots els fitxers necessaris per confeccionar la pàgina web. Cal, per tant, comprimir en un únic fitxer l'estructura de carpetes i fitxers del lloc web creat amb mobirise.
• un document text (.pdf) on s'explica les incidències al fer la pràctica: quant temps ha portat fer-la, ha estat fàcil o no, què és el que ha estat més dificultós, què milloraríeu, ...

Tots aquests documents es col·locaran a la bústia del eCampus

El lloc web ha d'estar publicat a l'espai web personal de l'alumne en el servidor web de l'Escola, ssh.eupmt.tecnocampus.cat.

El resultat de l'activitat tindrà una ponderació de 1/4 del 25% respecte la qualificació final assignada al conjunt de les 3 activitats pràctiques programades.

Objectius específics:

En finalitzar l’activitat l’estudiant o estudianta ha de ser capaç de:

• crear un projecte (lloc web) amb Mobirise.
• maquetar amb l'estructura de portfoli.
• incorporar imatges amb les mides i format adequat.
• publicar el lloc web al servidor.

Títol de l’activitat 2: Pràctica d'edició fotogràfica i vectorial.

Descripció general:

Amb aquesta pràctica l'estudiant o estudianta aprèn a treballar amb un programa d'edició d'imatges per a la creació de logotips i capçaleres de la pàgina web. Es treballarà la tècnica de l'agrupació formant màscares que permetrà fusionar dues imatges diferents en una de sola. També utilitzarem els filtres per crear efectes especials a les imatges. Aprendrem a treballar amb capes. L'estudiant o estudianta crearà el logotip i la portada de la seva pàgina personal iniciada en l'activitat 1.

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA4.

Material de suport:

Guió de pràctiques (disponible al eCampus i a la web de l'assignatura).

Guia d'usuari de Adobe Photoshop (https://www.adobe.com/es/products/photoshop.html) i Adobe Illustrator (https://www.adobe.com/es/products/illustrator.html).

Lliuraments i vincles amb l’avaluació:

Cal lliurar:

• un fitxer .zip amb tots els fitxers en format .psd o .ai que contenen el logotip i la portada dissenyada per a la seva pàgina personal.
• un document text (.pdf) on s'explica les incidències al fer la pràctica: quant temps ha portat fer-la, ha estat fàcil o no, què és el que ha estat més dificultós, què milloraríeu, ...

Tots aquests documents es col·locaran a la bústia del eCampus.

Cal incorporar i publicar el logotip i la portada, amb el tipus de fitxer adequat (.gif, .jpg, .png), a la web personal de l'alumne.

El resultat de l'activitat tindrà una ponderació de 1/4 del 25% respecte la qualificació final assignada al conjunt de les 3 activitats pràctiques programades.

Objectius específics:

En finalitzar l'activitat l'estudiant o estudianta ha de ser capaç de:

• crear un fotomuntatge mesclant diferents imatges.
• aplicar màscares amb vores difoses per fusionar dues imatges.
• treballar amb capes
• aplicar filtres a les imatges
• decidir el format del fitxer més adequat per a la imatge per a la publicació web.

Títol de l’activitat 3: Pràctica de maquetació web.

Descripció general:

Amb aquesta pràctica l'estudiant o estudianta aprèn a crear una interfície gràfica d'usuari per a la seva pàgina personal que implementi el patró de pàgina única usant la llibreria Bootstrap. La pràctica ha d'incorporar elements interactius: carrusels d'imatges, imatges que giren quan el ratolí és al seu damunt, etc. Addicionalment, caldrà incorporar peces audiovisuals al contingut publicat. Aquesta pràctica serà una segona versió de l'activitat 1, incorporant molts elements, especialment, l'aplicació d'estils en quant al color i la tipografia. En aquesta pràctica sí es fa èmfasi en l'estructura semàntica de l'HTML i el grau de personalització del disseny amb un CSS propi.

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA1, RA2, RA3 i RA5

Material de suport:

Guió de pràctiques (disponible al campus digital i a la web de l'assignatura)

Guia d'usuari de Adobe Dreamweaver.

Guia d'usuari Manual de Adobe Photoshop.

Lliuraments i vincles amb l’avaluació:

Cal lliurar un document text (.pdf) on s'explica les incidències al fer la pràctica: quant temps ha portat fer-la, ha estat fàcil o no, què és el que ha estat més dificultós, què milloraríeu, ... Cal explicitar les decisions en quant als estils utilitzats: per què aquests colors?, per què aquesta tipografia?, etc.

Aquest document es col·locarà a la bústia del eCampus.

Cal publicar la web al servidor web de l'escola en l'espai reservat a l'alumne.

El resultat de l'activitat tindrà una ponderació de 1/2 del 25% respecte la qualificació final assignada al conjunt de les 3 activitats pràctiques programades.

Objectius específics:

En finalitzar l'activitat, l'estudiant o estudianta ha de ser capaç de:

• crear una pàgina HTML maquetada amb Bootstrap.
• decidir l'estil adequat a la publicació a la web en quant a la gama de colors i tipografia a emprar, tot utilitzant CSS.
• incorporació d'elements interactius.
• incorporació d'àudio i vídeo.

Títol de l’activitat 4: Examen parcial.

Descripció general:

Es realitza un examen on s'avalua els coneixements dels continguts 1 i 2. Aquesta prova consta d'una part de qüestions sobre conceptes associats als objectius d'aprenentatge de l'assignatura pel que fa al coneixement i comprensió, i d'un conjunt d'exercicis d'aplicació. L'estudiant o estudianta disposa de 2 hores per a la realització de la prova dins del seu horari habitual de classe. Un cop realitzat l'examen, el professor explicarà la resolució al grup.

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA2 i RA3.

Material de suport:

Enunciat de la prova.

Lliuraments i vincles amb l’avaluació:

Resolució de la prova.

El resultat de l'activitat s'incorporarà a l'avaluació de l'assignatura amb un valor del 30% de la nota de teoria, és a dir, un 22,5% de la nota final.

Títol de l’activitat 5: Examen final.

Descripció general:

Es realitza un únic examen final on s'avalua els coneixements dels continguts 1, 2, 3 i 4 . Aquesta prova consta d'una part de qüestions sobre conceptes associats als objectius d'aprenentatge de l'assignatura pel que fa al coneixement i comprensió, i d'un conjunt d'exercicis d'aplicació. L'estudiant o estudianta disposa de 3 hores per a la realització de la prova en el període d'exàmens finals establert pel Cap d'estudis. Un cop realitzat l'examen, el professor publicarà la resolució.

Aquesta activitat és una evidència dels resultats d'aprenentatge: RA1, RA2, RA3 i RA5

Material de suport:

Enunciat de la prova.

Lliuraments i vincles amb l’avaluació:

Resolució de la prova.

El resultat de l'activitat s'incorporarà a l'avaluació de l'assignatura amb un valor del 70% de la nota teoria, és a dir, un 52,5% de la nota final.

La qualificació final s'obté de la següent ponderació de les qualificacions parcials:

NFinal = 0.75 NTeoria + 0.25 NPràctiques

NPràctiques s'obté amb la mitja aritmètica de les tres activitats de caràcter pràctic realitzades durant el curs. L'activitat 3 pondera el doble que les altres activitats pràctiques.

La NTeoria s'obté amb la realització de dos exàmens,

                  NTeoria = 0.3 NParcial + 0.7 NExamen_Final

En l'examen NParcial s'avalua els coneixements dels continguts 1 i 2. Aquestes prova té una durada de 1,5h i es realitza dins l’horari de classe, a meitat de trimestre (setmana 5, aproximadament).

L'examen NExamen_Final és un únic examen on s’avalua tots els coneixements dels continguts de l’assignatura. Tindrà una durada de 3 h, dins del període d’exàmens finals que estableix el Cap d’Estudis.

Si finalment, l’alumne no ha obtingut una NFinal superior o igual a 5.0, l’alumne podrà presentar-se a un únic examen de recuperació de NTeoria, dins del període d’exàmens de recuperació que estableix el Cap d’Estudis. Els alumnes que tinguin una qualificació final de "No Presentat" en la primera convocatòria, no es podran presentar a l'examen de recuperació.

Normes de realització de les activitats

Totes les activitats de l'assignatura són individuals.

Si no es realitza alguna de les activitats de pràctiques, es considerarà no puntuada.

Obtindrà una qualificació de No presentat a NPràctiques si hi ha alguna activitat de pràctiques no puntuades.

La realització de les activitats pràctiques és obligatòria. És a dir, una qualificació de No presentat a NPràctiques, no permetrà aplicar la ponderació amb la NTeoria i, per tant, la qualificació final de l’assignatura serà de “No Presentat”.

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

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

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.