FORUM2:Creació_d’una_Interfície_MartaDíaz

FORUM2:Creació_d’una_Interfície_MartaDíaz

de Marta Diaz Muñoz -
Número de respuestas: 0

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

Una paleta de colors és accessible quan els colors es veuen clarament entre si i el text es pot llegir sense esforç sobre el fons, fins i tot per a persones amb problemes de visió o daltonisme.

En poques paraules:

  • Suficient contrast entre text i fons (no colors massa semblants).

  • Evitar combinacions confuses (per exemple, verd i vermell junts).

  • Ser clara i llegible per tothom, no només per qui hi veu perfecte.

WCAG AA/AAA són només diferents nivells d’exigència de com de llegible i contrastada ha de ser la combinació.

  • Explica la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta)

Para la parte del header y el footer;

#2E0072(morado oscuro) <- para el fondo, un tono oscuro del morado para resaltar los menús

#FFF9A0(amarillo) <- para la letra , un color complementario del morado para darle contraste

Para la parte del resto de la página (el contenido);

#2E0072 (morado oscuro) <- el mismo que el del header y el footer, para la letra

#FFFBE7 (Amarillo flojito) <- para darle contraste al fondo de la página 

  • Utilitza l'eina Color Contrast Checker o WebAIM Contrast Checker per avaluar el contrast de la paleta de colors. Adjunta la imatge resultant. 

blobid10.png

blobid11.png

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?

Textura triada; Es una textura senzilla i que li dona contrast a la pàgina web.

Saturar una pàgina a nivell de textura significa carregar la pàgina web de detalls i textures a nivell de que hi sigui complicat la lectura o comprensió del contingut.

blobid12.png

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

He tret la textura de ChatGPT, perquè de les diferents pagines web que em proporcionaven textures no m’ha agradat del tot cap. Descarregant la imatge de la textura.

blobid13.png

  • Adjunta captura resultant de la pàgina amb la textura de fons, el header i el footer. 

blobid14.png

blobid15.png

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. 

He triat aquesta font perquè penso que queda uniforme amb la pàgina web, es una font bonica, simple i queda professional esteticament.

blobid16.png

blobid17.png

4. Layout HTML/CSS bàsic. (20%)

  • Realitza una plantilla de fitxer HTML amb divs per header, menú, main, footer, etc. 

blobid18.png

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

general.css

blobid19.png

reset.css

blobid20.png

textures.css

blobid21.png

colors.css

blobid22.png

fonts.css

blobid23.png

layout.css

blobid24.png



  • Adjunta una captura de pantalla (o diverses) de l'estructura de carpetes del projecte on es vegin els diferents CSS, HTML, etc.  

blobid25.png

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.

Fet.

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

Fet.

  • Adjuntar la carpeta del projecte HTML i CSS en format .zip sota el nom: F2_Cognom_Nom.zip

Fet.

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

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