Informació general


Tipus d'assignatura: Obligatòria

Coordinador: Maddalena Fedele

Trimestre: Primer trimestre

Crèdits: 4

Professorat: 

Marco Antonio Rodríguez Fernández

Curs acadèmic: 2018

Curs d'impartició: 3

Competències / Resultats d'aprenentatge


Competències específiques
  • E1_Dissenyar i programara les interífices gràfiques de portals web estàtics o dinàmics, d'aplicacions interactives i de videojocs, seguint criteris d'usabilitat i accessibilitat

  • E4_Dissenyar, planificar, editar, programar i comercialitzar aplicacions multimèdia interactives

  • E17_Redactar peces periodístiques de diferents gèneres amb els seus sistemes de titular i expressar-se correctament tant de forma escrita com oral

Presentació de l'assignatura


Amb l’objectiu que l’alumne assoleixi les habilitats necessàries per a poder entendre la funció de la publicació electrònica i els seus camps d’aplicació. Aquesta assignatura aprofundeix tant en el camp del disseny de comunicacions web, com en el camp de la producció de suports tecnològics que la recolzen.

Resultats d'aprenentatge


  • Explicar la funció de la publicació electrònica i els seus camps d'aplicació.
  • Dissenyar, editar i mantenir llocs web.
  • Dissenyar, editar i publicar llocs webs tenint en compte criteris d'usabilitat i d'accessibilitat.
  • Construir llocs web a partir d'una arquitectura de la informació i un model de publicació adient.
  • Distingir les característiques dels sistemes d'informació basats a la web i les principals xarxes telemàtiques de distribució de continguts.

 

Metodologia de treball


Classes teòriques: A excepció d'algunes classes magistrals, la resta de classes el professorat proposa i resol problemes, fent exposició dels continguts teòrics necessaris per a la seva resolució. Cadascuna d'aquestes activitats solen ser sencills problemes o exercicis de comprensió dels continguts que s'estan presentant. L'alumne disposa i utilitza com a material de suport dins del campus virtual. La solució d'aquests problemes és publicada passats uns dies i comentada a classe. 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, prenent les notes que cregui oportunes per a un estudi posterior.

Classes pràctiques: Tot i que aquestes classes es realitzaran en els laboratoris, es recomana a l'alumne utilitzar el seu propi portàtil per a major comoditat. Algunes de les pràctiques seran individuals, i d’altres els alumnes s'agrupen en equips de 3 o 4 persones. La dinàmica de les activitats consisteix en una explicació de la tasca que es realitzarà durant les dues següents setmanes i una atenció personalitzada per a la resolució de dubtes.

Continguts


  • U1: Publicació de continguts a Internet
    • Conceptes bàsics de la publicació electrònica.
    • Estudi del WWW com a llenguatge d’un mitjà.
    • Normes de netiqueta, ètica i llicencies.
  • U2: Eines per a publicació web
    • Funcionament dels protocols que fan possible la WWW
    • Característiques del HTML5
      • Esquelet HTML
      • Elements propis del HTML5
      • Taules
      • Llistes
      • Agrupacions Span, Div, Id i Class
      • Formularis
    • Jerarquies de clases
    • Fulls d’estils CSS
      • Validador de CSS
      • Selectors de CSS
      • Colors al CSS
      • Animacions amb CSS
      • Organització dels estils amb CSS
      • Us de llibreries de CSS
    • Disseny web adaptable (responsive)
  • U3: Desenvolupament d’interactivitats amb JS
    • Funcionament del DOM
      • Propietats i mètodes del DOM
    • Edició CSS-HTML-JS interactiva amb CodePen
    • Debugació i inspecció fent servir el navegador.
    • Variables, condicionals i bucles.
    • Funcions matemàtiques per al moviment d’elements.
    • Col·lisions i interaccions amb ratolí i teclat.
  • U4: Arquitectura de la informació i disseny interactiu
    • Característiques de la informació a un entorn onLine
    • Estructuració de la informació a un lloc web
    • Principis del diseño interactivo
    • Guia d’estil
    • Tipografies i colors
    • Disseny centrat en l’usuari / design thinking
  • U5: Accés a dades i visualització
    • Organització de les dades a un servidor
    • Accés a les dades estructurades
    • Eines de visualització i representació
    • Tipus de bases de dades
    • Tipus de relació amb les xarxes socials
    • Visualització gràfica de grans quantitats de dades
  • U6: Construcció de llocs web amb CMS
    • Instal·lació i configuració d’un CMS
    • Modificació de temes
    • Funcionament dels serveis d’allotjament
    • CMS orientats al eCommerce

Activitats d'aprenentatge


  • U1: Publicació de continguts a Internet
    • Exercici 1: Exercici sobre algun dels conceptes treballats a classe
    • Exercici 2: Qüestionari autoavaluatiu
  • U2: Eines per a publicació web
  • U3: Arquitectura de la informació i disseny interactiu
    • Pràctica 1: Anàlisi d'un lloc web.
      • Amb aquesta pràctica s’espera que l’alumne demostri els coneixements adquirits a la unitat 3.
    • Exercici 4: Treball amb eines per a confeccionar paletes de colors i estils.
    • Examen Parcial
      • Examen teòric per avaluar els continguts per escrit
      • No es podran fer servir apunts ni cap mena de recurs tecnològic
      • L’examen es farà de forma presencial en paper
  • U4: Desenvolupament d’interactivitats amb P5.JS
    • Pràctica 2: Videojocs senzill amb HTML+CSS+JS
      • L’alumne haurà de demostrar a la primera pràctica la comprensió dels continguts treballats a la U2, la U3 i a assignatures anteriors.
    • Exercici 3: Bateria d’exercicis per practicar amb bucles
  • U5: Accés a dades i visualització
    • Pràctica 3: Construcció d'un web interactiu amb p5.js
      • Aquesta pràctica consisteix en recuperar dades del nuvol a partir de documents CSV o JSON i representar-les de forma interactiva.
    • Exercici 5: Visualització interactiva de dades al nuvol.
  • U6: Construcció de llocs web amb CMS
    • Pràctica 4: Construcció d’un sistema gestor de continguts.
      • Aquesta pràctica consisteix en la implementació d'un gestor de continguts.
    • Examen Final.

Activitats i sistema d'avaluació


Ponderació de notes

  • Examen Parcial: 20%
  • Examen Final: 30%
  • Treball a classe: 10%
  • Pràctiques: 40%

Per poder tenir en compte la nota de pràctiques i la nota de treball a classe, la mitjana dels exàmens ha de superar el 5. La convocatòria extraordinària de l'assignatura recuperarà la nota dels dos exàmens.

Les activitats (pràctiques i treballs) no es poden recuperar. En el cas del plagi o còpia, quedaran penalitzats tant l’alumne plagiat com l’alumne plagiador. L'alumne haurà de lliurar els treballs en els terminis establerts. Altrament, la nota d'una activitat lliurada fora de termini és un 0.

Bibliografia


Bàsic

MacDonald, Matthew. HTML5: The Missing Manual. Sebastopol, Califòrnia: O'Reilly, 2011 

https://www.amazon.com/HTML5-Missing-Manual-MacDonald/dp/1449363261

 

McFarland, David Sawyer. CSS3: The Missing Manual, 3rd Edition [en línia]. 3. Sebastopol, Califòrnia: O'Reilly, 2012 

http://www.oreilly.com/pub/missingmanuals/csstmm4e

Palacios, Alfons. Apunts de Publicació Electrònica. 5.9. Mataró: Publicació electrònica a l'espai Atenea, 2015.

Designing Web Usability: The Practice of Simplicity - Jakob Nielsen, 1999 - https://www.amazon.com/dp/156205810X?tag=useitcomusablein

Complementària

Damian Wielgosik. How to Code in HTML and CSS3.

http://howtocodeinhtml.com/

Processing comunity times JavaScript comunity - https://p5js.org