1. Cerca i selecció de la paleta de colors accessible.
-
Què fa que una paleta de colors sigui accessible? (Contrast cromàtic WCAG AA/AAA).
Una paleta és accessible quan jo puc distingir de manera clara tots els continguts que n’hi ha, sent que els colors no són un factor que afecta la meva manera de veure la meva interfície
AA: Contrast minim de 4.5:1 per a text normal
AAA: Contrast minim de 7:1 per a text normal
-
Explica la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta)
Aquests són els colors que he triat d'acord amb la seva accessibilitat
Fons: Blanc #FFFFF
Text Principal: Gris fosc #1a1a1a
-
Utilitza l'eina Color Contrast Checker o WebAIM Contrast Checker per avaluar el contrast de la paleta de colors. Adjunta la imatge resultant.
2. Selecció de textura o patró de fons.
-
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.
Els fons l’he extret de la pagina Freepik (https://www.freepik.es/fotos-vectores-gratis/fondos-para-paginas-web )
Pero no l’he tornat a trobar, tot i això, poso captura de la pagina web:
Captura del codi CSS:
-
Adjunta captura resultant de la pàgina amb la textura de fons, el header i el footer.
3. Elecció de font accessible.
-
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 “Montserrat”, ja que és una lletra clara, que s’usa en moltes webs, ja que no sol tindre problemes de lectura per la seva alta llegibilitat
Mostra de la font escollida:
Captura del codi:
4. Layout HTML/CSS bàsic. (20%)
-
Realitza una plantilla de fitxer HTML amb divs per header, menú, main, footer, etc.
No he pogut pujar el fitxer .zip, ja que era massa gran per l'entrega, però aquí està l'arxiu en un Drive que he fet:
https://drive.google.com/file/d/1QZFuFEiHWmm-CUiCd0nccCpqFX_7imy6/view?usp=drive_link
-
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.
Captura del CSS central que junta tots els CSS:
-
Adjunta una captura de pantalla (o diverses) de l'estructura de carpetes del projecte on es vegin els diferents CSS, HTML, etc.
Captura de pantalla:
