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 permeten que qualsevol persona fins i tot aquelles que tenen baixa visió o daltonisme puguin llegir el contingut de la pàgina sense dificultat.
WCAG AA: Requereix un contrast mínim de 4.5 entre text i fons o 3.0 per a textos grans.
WCAG AAA: Requereix un contrast mínim de 7.1 entre text i fons o 4.5 per a textos grans.
Explica la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta)
He escollit aquests colors perquè formen una paleta de blaus molt professional i elegant i que encaixa molt per fer una pàgina de tecnologia ja que la tecnologia s'associa molt amb el blau:
#1B263B - Blau marí fosc, aporta un contrast alt i ajuda a delimitar clarament les zones principals.
#415A77 - Blau grisenc mitjà, funciona bé com a fons d’un bloc de contingut perquè és fosc per donar presència però no és molt fosc i no cansar la vista.
#A8BBD0 - Blau grisenc clar, va be per a crear textures i línies amb un color suau i per a botons que destaquen en un fons fosc
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. (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?
He triat aquesta textura ja que com he dit abans la tecnologia s'associa molt amb el blau i amb un color suau fa que no saturi molt la pàgina.
Saturar la pàgina vol dir que la textura et distreu i et cansa a la vista.
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 agafat la textura en la pàgina de Hero patterns
L’he afegit a la meva pàgina directament amb un codi css que et proporciona la pàgina de Hero patterns.
Adjunta captura resultant de la pàgina amb la textura de fons, el header i el footer.
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 escollit la font de Merriweather perquè té un bon espaiat de lletres i facilita la lectura per a persones amb dificultats visuals.
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.
general.css
colors.css
fonts.css
layout.css
reset.css (extret d’Eeric Meyers)
textures.css
Adjunta una captura de pantalla (o diverses) de l'estructura de carpetes del projecte on es vegin els diferents CSS, HTML, etc.
5. Format d'entrega. (15%)