Fòrum 2: Creació d'una interfície senzilla i accessible
Completion requirements
Durant aquesta activitat, heu de compartir amb la resta de membres de la classe, el resultat obtingut de la creació d'una interfície web senzilla. Heu de complir els requeriments que s'exposen a continuació i omplir les qüestions per a explicar a la resta com ho heu fet i perquè.
1. Cerca i selecció de la paleta de colors accessible. (20%)
- Què fa que una paleta de colors sigui accessible? (Contrast cromàtic WCAG AA/AAA).
- Explica la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta)
- Utilitza l'eina Color Contrast Checker o WebAIM Contrast Checker per avaluar el contrast de la paleta de colors. Adjunta la imatge resultant.
| Puntuació | Criteris |
| 10-9 | Paleta amb 2-3 colors amb contrast AA/AAA; justificació excel·lent de l’accessibilitat; ús correcte de l’eina; adjunta captures de la paleta i comprovació; explicació clara i completa. |
| 8-7 | Paleta amb colors amb contrast acceptable però no òptim (mínim AA); justificació bona, però podria aprofundir més; ús i captura de l’eina aparent, però manca algun detall menor. |
| 6-5 | Paleta amb alt risc de contrast baix (per sota AA en algun cas); justificació superficial o poc relacionada amb l’accessibilitat; manca alguna captura important. |
| 4-0 | Colors sense contrast adequat (fàcilment rebutjats per criteris WCAG); manca justificació o explicació, no s’ha usat ni mostrat l’eina, lliurament incomplet o descurat. |
2. Selecció de textura o patró de fons. (20%)
- Tria una textura suau o patrons SVG que no saturin la pàgina. Mostra el triat i explica el motiu. Què significa saturar una pàgina a nivell de textura?
- On heu extret la textura? Com l'heu afegit a la pàgina web? Adjunta captures de la pàgina on l'heu extret i captura del codi CSS.
- Adjunta captura resultant de la pàgina amb la textura de fons, el header i el footer.
| Puntuació | Criteris |
| 10-9 | Textura/patró molt ben triat, suau i no saturat; excel·lent justificació i explicació; s’explica “què vol dir saturar” la pàgina; doc. de l’origen, CSS i captures. |
| 8-7 | Bona selecció de textura, lleugerament carregada però adequada; justificació correcta del motiu i l’origen; manca algun detall sobre saturació, però CSS i captura presents. |
| 6-5 | Textura que dificulta una mica la llegibilitat; justificació poc clara; manca alguna de les captures/explicacions requerides. |
| 4-0 | Textura inadequada (molt saturada o fora de context), sense justificació, sense origen clar, sense codi ni captures clares. |
3. Elecció de font accessible. (10%)
- Tria una font del llistat: Google Fonts Accessible List i afegeix aquesta font al CSS. Adjunta una imatge de la font triada, el motiu pel qual l'heu triat i captura del codi CSS adjuntant la font.
| Puntuació | Criteris |
| 10-9 | Font triada del llistat accessible; justificació clara i adequada; captura del CSS i font adjunta; raó per l’elecció molt ben explicada. |
| 8-7 | Font accessible però justificació poc profunda o falta algun motiu concret; CSS correcte però presentació millorable. |
| 6-5 | Font triada és vàlida però la justificació és insuficient o poc raonada; manca alguna de les captures obligatòries. |
| 4-0 | Font no accessible, sense justificació, sense CSS o sense cap explicació ni captura. |
4. Layout HTML/CSS bàsic. (20%)
- Realitza una plantilla de fitxer HTML amb divs per header, menú, main, footer, etc.
- Realitza una plantilla de fitxer CSS (General) i una plantilla per CSS de fonts, colors, textures, reset, etc. Adjunta imatge de com fas l'enllaç entre el CSS general i la resta d'arxius d'estils.
- Adjunta una captura de pantalla (o diverses) de l'estructura de carpetes del projecte on es vegin els diferents CSS, HTML, etc.
| Puntuació | Criteris |
| 10-9 | Maquetació neta i clara amb divs per cada secció; fitxers CSS ordrets (general, fonts, colors, reset…); tot ben enllaçat; estructura de carpetes impecable; totes les captures demanades adjuntes, molt ben documentat. |
| 8-7 | Maquetació adequada però amb alguna petita errada; fitxers CSS parcialment separats; estructura de carpetes clara però podria millorar; alguna captura o explicació manca però correcta en general. |
| 6-5 | Maquetació funcional però amb problemes de separació CSS o d’estructura de carpetes; falten parts o captures essencials. |
| 4-0 | Maquetació pobra, manca d’estructura CSS, projectes amb carpetes desordenades, poques captures, mala documentació. |
5. Format d'entrega. (15%)
- S'ha d'entregar cadascuna de les fases degudament comentades, amb imatges i proves que demostrin els motius de les eleccions que feu, el resultat final, etc.
- El format ha de ser correcte, sense faltes ortogràfiques, títols en negreta i didàctic on expliquis com ho has fet per a que la resta dels teus companys pugui veure el resultat.
- Adjuntar la carpeta del projecte HTML i CSS en format .zip sota el nom: F2_Cognom_Nom.zip
- El fil obert al fòrum té tota la informació necessària i els fitxers adjunts correctes. Cada estudiant ha d'obrir un fil i fer els comentaris necessaris en el seu propi fil per dur a terme l'activitat.
- Un lliurament fora de data o un lliurament sense els fitxers i la informació demanada no podrà ser avaluada.
| Puntuació | Criteris |
| 10 | Alguna fase no està del tot comentada o falten explicacions clares; hi ha imatges o proves però no en totes les parts; format amb diverses errades formals o títols poc destacats; .zip i fòrum parcialment complerts o presentats; lliurament en data o amb molt poc retard justificat. |
| 7,5 | Alguna fase no està del tot comentada o falten explicacions clares; hi ha imatges o proves però no en totes les parts; format amb diverses errades formals o títols poc destacats; .zip i fòrum parcialment complerts o presentats; lliurament en data o amb molt poc retard justificat. |
| 5 | Alguna fase no està del tot comentada o falten explicacions clares; hi ha imatges o proves però no en totes les parts; format amb diverses errades formals o títols poc destacats; .zip i fòrum parcialment complerts o presentats; lliurament en data o amb molt poc retard justificat. |
| 0 | Manca comentari o justificació en més d’una fase; falten imatges, proves o explicacions; format incorrecte amb moltes errades ortogràfiques o absència de títols; .zip incorrecte o no presentat; el fil del fòrum no inclou la informació o fitxers demanats; lliurament fora de data sense justificar. |
6. Coavaluació (10%)
En aquest apartat hem de fer l'avaluació de com a mínim 3 companys de classe. Aquesta puntuació és únicament per la persona que fa l'avaluació, és a dir, el company o companya avaluat/ada, no tindrà cap repercusió a la nota, de les coavaluacions que puguin fer els companys sobre ells. Aquesta coavaluació s'ha d'omplir en el següent formulari de Google. Cadascú ha d'omplir 3 vegades el formulari, una per company o companya que del que es faci l'avaluació.
| Puntuació | Criteris |
| 10 | Omple les tres coavaluacions. Les respostes són coherents i desenvolupa la seva opinió respectuosament i basant-se en els coneixements assolits a la part teòrica del mòdul professional. |
| 5 | No acaba d'omplir totes les coavaluacions. Tot i omplir-les totes, deixa de definir molta informació important a l'hora de coavaluar. |
| 0 | No realitza la coavaluació correctament. |
DATA DE LLIURAMENT MÀXIM: 24/11/2025 (21.25h).
DATA DE LLIURAMENT COAVALUACIÓ DELS COMPANYS/ES: 25/11/2025 (19.25h).
| Status | Discussion | Started by | Last post | Replies | Actions |
|---|---|---|---|---|---|
|
Locked
|
|
|
0 |
|
|
|
|
|
0 |
|
||
|
|
|
0 |
|
||
|
|
|
0 |
|
||
|
|
|
0 |
|
||
|
|
|
0 |
|
||
|
Locked
|
|
|
0 |
|
|
|
|
|
0 |
|
||
|
Locked
|
|
|
0 |
|
|
|
Locked
|
|
|
0 |
|
|
|
Locked
|
|
|
0 |
|
|
|
|
|
0 |
|
||
|
|
|
0 |
|
||
|
Locked
|
|
|
0 |
|
|
|
Locked
|
|
|
0 |
|
|
|
Locked
|
|
|
1 |
|
|
|
Locked
|
|
|
0 |
|
|
|
|
|
0 |
|
||
|
|
|
0 |
|
||
|
Locked
|
|
|
0 |
|
|
|
Locked
|
|
|
0 |
|
|
|
Locked
|
|
|
1 |
|
|
|
Locked
|
|
|
1 |
|
|
|
Locked
|
|
|
2 |
|
|
|
Locked
|
|
|
1 |
|
|
|
Locked
|
|
|
1 |
|
|
|
Locked
|
|
|
2 |
|