104113 - SISTEMES MULTIMÈDIA

Tipus d'assignatura: Obligatòria

Coordinador: Rafael Suárez Gómez

Trimestre: Primer trimestre

Crèdits: 4

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.

Aquesta assignatura disposa de recursos metodològics i digitals per fer possible la seva continuïtat en modalitat no presencial en el cas de ser necessari per motius relacionats amb la Covid-19.
D'aquesta manera s'assegurarà la consecució dels mateixos coneixements i competències que s'especifiquen en aquest pla docent.

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. La dedicació per part de l'estudiant serà: 3h/set. x 10 set. = 30 hores totals.
• 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. La dedicació per part de l'estudiant serà: 1h/set. x 10 set. = 10 hores total

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. La dedicació per part de l'estudiant serà de 5 hores, aproximadament.

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. La dedicació per part de l'estudiant serà de 40 hores totals, aproximadament.

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 5 activitats amb caràcter d'avaluació.

Per tal de superar (aprovar) les activitats avaluatives, els estudiants hauran de demostrar:

• Que han adquirit els coneixements teòrics relatius als continguts de l'assignatura i que la seva comprensió els permet de portar-los a la pràctica [MECES-2 punt a, punt c]
• Que poden desenvolupar solucions a problemes que, si bé semblants a d'altres vistos anteriorment, presenten aspectes que són nous [MECES-2 punt f]

En relació a la competència bàsica assignada a l'assignatura, aquesta queda coberta especialment pel que fa als aspectes que s'explicite:

• G5 (desenvolupament d'habilitats d'aprenentatge necessàries per a estudis posteriors). Els estudiants han de demostrar: 
  • que són capaços d'accedir de forma autònoma a la documentació complementaria que se'ls dóna: guies d'usuari del programari necessari per fer les pràctiques, tutorials de referència, etc.
  • que han adquirit uns hàbits de treball efectius, sabent analitzar el problema que han de resoldre, accedir a les fonts de documentació necessàries, i aplicar solucions tècniques avançades.
  • que identifiquen correctament quins són els aspectes d'aprenentatge més rellevants de l'assignatura, els quals seran imprescindibles per afrontar assignatures posteriors amb èxit.

Totes les activitats de l'assignatura contribueixen a l'assoliment progressiu de la competència específica de l'assignatura, més concretament, en els aspectes següents:

• E1 : Dissenyar les interfícies gràfiques de portals web estàtics, seguint criteris d'usabilitat i accessibilitat.

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.

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 7.5% respecte la qualificació final.

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.

Vinculació amb els resultats d'aprenentatge i competències de l'assignatura:

• Aquesta activitat és una evidència dels resultats d'aprenentatge: RA1, RA2 i RA5
• Aquesta activitat contribueix a l'assoliment de la competència específica E1.

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.

Material de suport:

Llistat de tutorials de referència que es poden trobar al web.

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 7.5% respecte la qualificació final.

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.

Vinculació amb els resultats d'aprenentatge i competències de l'assignatura:

• Aquesta activitat és una evidència dels resultats d'aprenentatge: RA4.
• Aquesta activitat contribueix a l'assoliment de la competència específica E1 i a avaluar la competència bàsica G5.

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.

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 15% respecte la qualificació final.

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.

Vinculació amb els resultats d'aprenentatge i competències de l'assignatura:

• Aquesta activitat és una evidència dels resultats d'aprenentatge: RA1, RA2, RA3 i RA5
• Aquesta activitat contribueix a l'assoliment de la competència específica E1

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.

Material de suport:

Enunciat de la prova.

Lliuraments i vincles amb l’avaluació:

Resolució de la prova.

El resultat de l'activitat tindrà una ponderació de 21% respecte la qualificació final.

Vinculació amb els resultats d'aprenentatge i competències de l'assignatura:

• Aquesta activitat és una evidència dels resultats d'aprenentatge: RA2 i RA3.
• Aquesta activitat contribueix a l'assoliment de la competència específica E1

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

Material de suport:

Enunciat de la prova.

Lliuraments i vincles amb l’avaluació:

Resolució de la prova.

El resultat de l'activitat tindrà una ponderació de 49% respecte la qualificació final.

Vinculació amb els resultats d'aprenentatge i competències de l'assignatura:

• Aquesta activitat és una evidència dels resultats d'aprenentatge: RA1, RA2, RA3 i RA5
• Aquesta activitat contribueix a l'assoliment de la competència específica E1

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

NotaFinal = 0.7 NotaTeoria + 0.3 NotaPràctiques

NotaPrà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 NotaTeoria s'obté amb la realització de dos exàmens,

                  NotaTeoria = 0.3 NotaParcial + 0.7 NotaExamen_Final

En l'examen NotaParcial 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 NotaExamen_Final és un únic examen on s’avalua tots els coneixements de tots els continguts de l’assignatura. Tindrà una durada de 3 h, dins del període d’exàmens finals que estableix el Cap d’Estudis. És necessari treure una nota mínima de 5 en aquest examen per poder aprovar l'assignatura.

Si finalment, l’alumne no ha obtingut una NotaFinal superior o igual a 5.0, l’alumne podrà presentar-se a un únic Examen de Recuperació de NotaTeoria (70% de NotaFinal), 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ó. És necessari treure una nota mínima de 5 en aquest examen de recuperació per poder aprovar l'assignatura.

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 NotaPrà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 NotaPràctiques, no permetrà aplicar la ponderació amb la NotaTeoria 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.