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).
La seva funció es aconsseguir que la pagina web sigui que totes les persones incloses les que tenen daltonisme o poca visió puguin llegir la informació de la web.
WCAG AA: contrast mínim 4.5:1 i amb el text gran 3:1
WCAG AAA: amb el text normal necesita un contrast mínim de 7:1 i amb el text gran necesita un contrast mínim de 4.5:1
Explica la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta)
He escollit aquesta paleta perque em donen un ambit natural com a paisatges naturals amb roques, fusta... I volia que fos una web que transmeti calma.
#232429 – Gris-negre: em dona una sensacio de serietat que dona una mica de estructura i aixi poder diferenciar seccions amb aquest color com textos
#5F7364 – Verd-gris-fosc: aporta el toc de calma, naturalitat com el bosc, la pedra. Es pot utilitzar per diferenciar el botons amb un fons blanc
#D4B687 – Beige: dona un toc de humanitat i de calidesa. Perfecte per els botons i el color d'alguns textos
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 escollit aquesta imatge de fons per la textura i la he escollit perquè dona tranquilitat, no et satura a la vista i no es una imatge que distregui
Saturar la pàgina vol dir que esta molt carregada i que cansa a la vista amb tants colors, formes...
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 imatge la he tret de la web Freepik
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 Sora perquè és una font que es molt llegible i te un disseny net i pulit
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.
style.css
colors.css
fonts.css
layout.css
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.
reset.css (tret 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%)