F2_Rueda_Dani

F2_Rueda_Dani

par Daniel Rueda Daudén,
Nombre de réponses : 1

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

Per a que una paleta de colors sigui accesible ha de tenir un contrast mínim de 7:1 per a text normal. 

Tenint en compte que el contraste máxim és 21:1 (entre negre i blanc), considero que aquest colors amb un contrast de 16.2:1 obté el grau AAA de WCAG2..

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

#FFFFFF

#400E1B

#000000

blobid0.png

blobid1.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?

Saturar una pàgina amb una textura significa que en aplicar un fons aquest no quedi massa carregat, amb molt detall, alt contrast o colors intensos que dificultin la lectura del contingut de la web.

Amb una textura suau busquem que el fons aporti sensació d’amplitud i profunditat sense interferir en una mala visibilitat del contingut a mostrar.

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

La textura s’ha generat la web de https://heropatterns.com/

En aquesta web pots seleccionar els teus colors, seleccionar un textura, ajustar l’opacitat i descarregar el svg o copiar el codi css.

blobid2.png



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

blobid3.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 la font Roboto Mono del llistat Google Fonts Accessible List i l’he afegit al CSS. Roboto Mono és una font monoespaciada, la qual cosa significa que totes les lletres tenen el mateix ample. Això facilita la lectura, especialment en codi, dades i contextos on la claredat i la alineació són clau. La tria s’ha fet pel seu alt contrast, disseny net i llegibilitat òptima, que compleix criteris d’accessibilitat.

https://fonts.google.com/specimen/Roboto+Mono

blobid4.png

blobid5.png

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

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

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

blobid7.png

blobid8.png

blobid9.png

blobid10.png

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

blobid11.png

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

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