Projectes Web I introdueix el desenvolupament front-end modern des dels fonaments del Web fins a la construcció d’interfícies interactives que consumeixen dades. L’estudiant treballa amb HTML semàntic, CSS, JavaScript i les Web APIs del navegador, i aprèn a aplicar accessibilitat, disseny responsive, organització modular del codi, gestió de l’estat, comunicació asíncrona, persistència local i tractament d’errors. L’assignatura combina explicacions, demostracions, exercicis Hands-On i el desenvolupament incremental d’un projecte integrador que permet aplicar els continguts i justificar les decisions tècniques adoptades. També es treballen les eines de desenvolupament del navegador, la validació i les pràctiques pròpies d’un entorn front-end professional.
Professors Titulars
Professors Docents
No cal haver cursat prèviament HTML, CSS o JavaScript, ja que l’assignatura en presenta els fonaments. És recomanable dominar conceptes bàsics de programació —variables, condicionals, bucles, funcions, arrays i objectes—, saber organitzar fitxers i carpetes i tenir autonomia per treballar amb un navegador, un editor de codi i documentació tècnica, principalment en anglès.
En finalitzar l’assignatura, l’estudiant haurà de ser capaç de:
• Explicar la relació entre Internet, el Web, el navegador, HTTP i una arquitectura client/servidor.
• Estructurar documents amb HTML semàntic, formularis i contingut multimèdia accessibles.
• Aplicar la cascada, els selectors, el model de caixa, Flexbox i Grid per crear interfícies mantenibles i responsive.
• Valorar de manera raonada l’ús de CSS propi, Bootstrap o Tailwind, sense substituir la comprensió dels fonaments.
• Programar amb JavaScript modern, mòduls, funcions i estructures de dades, evitant conversions o dependències implícites.
• Manipular el DOM, gestionar esdeveniments i estat d’interfície i preservar l’accessibilitat en les interaccions.
• Consumir APIs de manera asíncrona, representar estats de càrrega i error i utilitzar persistència local quan sigui adequada.
• Provar, depurar, documentar i defensar tècnicament una aplicació web desenvolupada en equip.
El programa s’organitza en deu unitats troncals i una unitat d’ampliació opcional:
1. Fonaments del Web i d’HTML: Internet i Web, URL, HTTP bàsic, navegador, DOM, estructura del document, enllaços, imatges, llistes, atributs, validació i DevTools.
2. HTML semàntic, formularis, multimèdia i accessibilitat: landmarks, jerarquia d’encapçalaments, controls natius, validació, imatges responsive, àudio, vídeo i proves amb teclat.
3. Cascada, selectors i disseny visual amb CSS: especificitat, herència, capes, pseudo-classes, unitats, tipografia i mantenibilitat.
4. Model de caixa, flux i posicionament: box-sizing, overflow, dimensions intrínseques, propietats lògiques, posicionament i stacking contexts.
5. Flexbox i layouts unidimensionals: eixos, alineació, wrapping, gap, basis, grow, shrink i mides mínimes.
6. CSS Grid i disseny responsive: tracks, fr, minmax, auto-fit, àrees, subgrid, media queries, container queries i clamp().
7. Patrons d’interfície i frameworks visuals: hero, CTA, cards, components, transicions, Bootstrap, Tailwind i criteris de selecció.
8. Fonaments de JavaScript i mòduls: tipus, variables, control de flux, arrays, objectes, transformacions, destructuring, mòduls i depuració.
9. Funcions, DOM, esdeveniments i estat: funcions pures, selecció i creació de nodes, seguretat de la sortida, delegació, formularis i renderitzat a partir de l’estat.
10. JavaScript asíncron, APIs i persistència: Promises, fetch, async/await, JSON, errors, cancel·lació, estats d’interfície, HTTP, localStorage i estratègies MPA/SPA/híbrides.
11. Ampliació opcional: HTTP, TLS, orígens i CORS, XSS, CSRF, CSP, WebSockets i fronteres de confiança del front-end. Aquesta unitat és complementària i només formarà part de l’avaluació si el professorat ho comunica expressament per escrit.
L’assignatura segueix una metodologia d’Aprenentatge Basat en Projectes. Cada setmana combina tres sessions lectives: una primera sessió d’aproximadament una hora per introduir conceptes, analitzar casos i fer demostracions, i dues sessions pràctiques —dues hores en total— dedicades a exercicis Hands-On, resolució de problemes, proves i desenvolupament del projecte.
Els materials organitzen l’aprenentatge en iteracions successives d’un mateix projecte guia. Cada unitat incorpora un lliurable o una definició de “fet” que obliga a aplicar el contingut en una situació real: primer l’estructura semàntica, després el disseny i la resposta a diferents amplades, i finalment la lògica, l’estat, les APIs i la persistència. Els Hands-On són individuals llevat que l’enunciat indiqui el contrari; el projecte de la convocatòria ordinària es desenvolupa en grups de tres persones.
El professorat proporciona orientació i retroacció durant les sessions. També es plantegen activitats de Self-Paced Learning perquè l’estudiant consulti documentació, provi alternatives i justifiqui les decisions preses. Les proves amb validadors, DevTools, teclat, zoom, contingut extrem, errors de xarxa i altres casos límit formen part del procés habitual de treball, no només de la comprovació final.
Convocatòria ordinària
MFinal = 0,7 × Mproject + 0,3 × Mknowledge. Per aplicar la fórmula, Mproject i Mknowledge han de ser iguals o superiors a 5.
Mknowledge és la mitjana dels Hands-On obligatoris. Cada exercici s’ha de lliurar dins del termini, complir els requisits de l’enunciat i obtenir una nota mínima de 5. Un sol exercici no lliurat, no acceptat, lliurat fora de termini sense una ampliació autoritzada o qualificat per sota de 5 implica no superar Mknowledge en la convocatòria ordinària.
Mproject = ((0,9 × Mpm + 0,1 × Mdoc) × Mdoc_delivered) × Minterview. Mpm és la nota de la implementació; Mdoc, la documentació; i Mdoc_delivered i Minterview són variables booleanes (0/1). Mpm i Mdoc han de ser com a mínim 5. La memòria i l’entrevista són obligatòries.
Convocatòria extraordinària
Només es recuperen els components no superats. Mknowledge es recupera mitjançant un únic examen final comú sobre les unitats obligatòries, amb una nota mínima de 5 i màxima de 7. Mproject es recupera amb una pràctica individual, memòria i entrevista, amb una nota màxima de 7. Si tots dos components estan suspesos, cal fer totes dues recuperacions i després es torna a aplicar la fórmula de MFinal.
Ús d’intel·ligència artificial (escala AIAS)
- Exercicis pràctics setmanals i activitats d’avaluació contínua realitzats i avaluats íntegrament a l’aula o laboratori (30%): Nivell 1 (sense IA). S’hauran de completar sense l’ajuda d’eines d’intel·ligència artificial generativa.
- Projecte final i projecte de recuperació (70%): Nivell 2 (planificació amb IA). La IA només es podrà utilitzar durant la ideació, l’exploració inicial, l’organització i la planificació del treball. No es podrà utilitzar per generar, completar, corregir o reescriure el codi, la documentació ni cap altra part del producte lliurat.
- Entrevista i defensa individual del projecte: Nivell 1 (sense IA).
Qualsevol ús permès de la IA s’haurà de declarar en el lliurament, indicant l’eina utilitzada, la seva finalitat i els prompts o instruccions introduïts. L’ús de la IA que excedeixi el nivell indicat, o la seva utilització sense declarar-la, es considerarà un incompliment de les normes d’honestedat acadèmica. L’alumnat serà responsable de l’autoria, l’exactitud i el funcionament de tot el material lliurat.
L’avaluació comprova tant el funcionament com la qualitat i la comprensió del treball. Els enunciats i les rúbriques concreten el pes de cada criteri i identifiquen expressament qualsevol requisit essencial o bloquejant. De manera general es valoren:
• Compliment funcional de l’enunciat i tractament correcte dels casos normals, buits, invàlids i d’error.
• HTML vàlid i semàntic, jerarquia coherent, formularis, multimèdia i navegació accessibles amb teclat i zoom.
• CSS mantenible: cascada explicable, baixa especificitat, model de caixa correcte, layouts amb Flexbox/Grid i resposta robusta a diferents amplades i continguts.
• JavaScript modern i modular: dades coherents, funcions amb responsabilitats clares, manipulació segura del DOM, esdeveniments, estat, asincronia, APIs, persistència i estats de càrrega o error.
• Qualitat del codi, organització del projecte, ús raonat de dependències, validació, proves, depuració amb DevTools i absència d’overflow o contingut inaccessible.
• Memòria tècnica, justificació de decisions, traçabilitat del treball de l’equip, participació i capacitat de defensar individualment tot el projecte.
Per superar l’assignatura cal obtenir almenys un 5 tant a Mknowledge com a Mproject, lliurar i superar tots els Hands-On obligatoris i superar la memòria i l’entrevista en els termes descrits a l’apartat d’avaluació.
WHATWG. HTML Living Standard. https://html.spec.whatwg.org/
Mozilla. MDN Web Docs: Learn web development i Web APIs. https://developer.mozilla.org/en-US/docs/Learn_web_development · https://developer.mozilla.org/en-US/docs/Web/API
ECMA International / TC39. ECMAScript Language Specification (ECMA-262). https://tc39.es/ecma262/
W3C Web Accessibility Initiative. Web Accessibility Tutorials. https://www.w3.org/WAI/tutorials/
Haverbeke, M. (2024). Eloquent JavaScript, 4a edició. https://eloquentjavascript.net/
Google Chrome Developers. Learn web development: HTML, CSS, JavaScript, accessibilitat, disseny responsive, formularis i proves. https://web.dev/learn/
Google Chrome Developers. Chrome DevTools documentation. https://developer.chrome.com/docs/devtools/
Bootstrap Team. Bootstrap documentation. https://getbootstrap.com/docs/
Tailwind Labs. Tailwind CSS documentation. https://tailwindcss.com/docs/