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). Lo que fa que la paleta sigui accesible es quan té un contrast suficient entre el text i fons segons els criteris WCAG 2.1 on ens diuen: -AA: contrast mínim de 4.5:1 per text normal, 3:1 per text gran.- AAA: contrast mínim de 7:1 per text normal.

    És a dir que la informació i contingut de la pàgina sigui clara, llegible i efectiva per la resta d’usuaris.

• Explica la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta) A l’hora de la elecció he agafat com colors: Color primari que sera el fons un gris clar #F9FAFB, color secundari(text) un gris fosc #1E1E1E y com color de botons etc un blau neutral #0077B6.

Els he agafat perquè el contrast entre el color primari i secundari supera AAA (15.5:1). A més a més de que el blau neutral dels botons enllaços etc te un té un contrast AA (4.8:1)

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

Quan una pagina es troba saturada es quan es carrega visualment l’espai amb molts colors,formes o contrasts, aixo pot dificultar la lectura i la concentració del nostre usuari.

• 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 la he extret de la web de www.svgbackgrounds.com, on ens deixa escollir diferents textures i posar els colors que vulguem. S’ha afegit amb un css bàsicament, adjunto captures del resultat i del codi. Aquesta és la web:

Codi del css amb la textura enllaçada.

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

Resultat de la textura:

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 Montserrat, com vam parlar a classe es una de les més comuns al disseny web de l’actualitat ja que té una molt bona llegibilitat, formes geomètriques i sobretot una bona adaptació a pantalles digitals. A sigut la meva elecció ja que és molt fàcil de llegir en pantalles de tota mida (mòbils, tauletes, ordinadors) i funciona molt bé amb dissenys minimalistes i accessibles.

codi i resultat de la font

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. Desde l'arxiu general enllaçat al html i he fet un import dels altres dins de general.

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

index.html

textures

              -dragon-scales.svg

css

              - colors.css

              - fonts.css

              - textures.css

              - general.css

              - reset.css

Interfície finalitzada:

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.