F2_Interfície_Alex

F2_Interfície_Alex

par Alejandro Poyatos Martin,
Nombre de réponses : 1

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

Perquè una paleta de colors sigui accessible si compleix amb els estàndards de contrast de les Pautes d'Accessibilitat al Contingut Web (WCAG)

  • si te contrast mínim 4.5:1 i amb el text gran 3:1 és AA

  • si te un contrast mínim de 7:1 i amb el text gran un contrast mínim de 4.5:1 és AAA

Explica la selecció de colors que has triat. Tria 2-3 colors.

He triat un blau fosc per utilitzar-lo de fons que es el #001E52 i el blau cel #1282A1 per la lletra per fer contrast, a més he utilitzat blancs i negres per reforçar la web, pero principalment els colors que predominen son aquests dos 

blobid0.png

Utilitza l'eina Color Contrast Checker o WebAIM Contrast Checker per avaluar el contrast de la paleta de colors. Adjunta la imatge resultant.

blobid1.png

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?

He triat aquesta imatge de fons ja que transmet professionalitat, a més segueix el patró de blaus que transmeten tranquil·litat.

Saturar una pàgina a nivell de textura vol dir que la pàgina estigui molt carregada de textures d’una manera excesiva que molesta a la vista mostrant un disseny desordenat i poc atractiu.

blobid2.jpg

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 pixabay

blobid3.png

i la implemento a aquet codi css
blobid4.png

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.

La font accesible que he triat es la Montserrat

blobid6.png

i la font aplicada es veu així
blobid7.png

la he triat perquè és la font que més utilitzo perquè és estètica amb una separació perfecta entre lletra i lletra el que ho accesible 

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

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

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

styles.cc

blobid9.png

colors.css

blobid10.png

layout.css

blobid11.png

blobid12.png

blobid13.png

reset.css

blobid14.png

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

 

blobid15.png 

 

Format d’Entrega