Cerca i selecció de la paleta de colors accessible. (20%)
-
Què fa que una paleta de colors sigui accessible?:
Una paleta de colores se considera accesible principalmente cuando cumple con las pautas de contraste cromático (relación de contraste) establecidas por las WCAG.
-
Explica la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta)
He elegido el blanco para el fondo porque es el más neutro y limpio y para el texto el color azul oscuro y profesional que tiene un contraste altísimo sobre el fondo blanco, con el color turquesa en botones o tal esta bien tmb con el color de texto.
Fondo: el blanco.
Texto principal: Azul oscuro (#0D3B66) y negro por ejemplo en boton de color torquesa o tambien el color blanco como de texto con el fundo aul oscuro se ve bien.
Acento Botones Enlaces: Turquesa (#23FCF5).
-
Utilitza l'eina Color Contrast Checker o WebAIM Contrast Checker per avaluar el contrast de la paleta de colors. Adjunta la imatge resultant.
Aquí como se ve tiene buena nota el color de textura azul oscuro sobre el fondo blanco y tmb sobre el fondo de botones turquesa, tambien puede usar el color blanco como color de texto con fondo azul oscuro
Selecció de textura o patró de fons. (20%)
- Textura
En el tema del diseño web y la accesibilidad, saturar una página web significa usar una textura o patrón de fondo que es visualmente claramente complejo o que tiene demasiado contraste.
Patrón Elegido: Abstract Envelope
lo he elegido este patrón porque utiliza gradientes de color suave y al generar una textura de color sutil sin generar el ruido visual o la vibracion .
con colores de la paleta blanco para el fondo base el yale o turquesa y azul oscuro para las zonas de gradiente.
La textura se extrajo de la web SVGBackgrounds.com, la cual permite personalizar colores y opacidad antes de exportar el código SVG.
Código de css con la textura enlazada.
Resultado
Elecció de font accessible. (10%)
- Founte de texto
Fuente de texto open sans
He elegido esta fuente Open Sans como la fuente principal de texto por su diseño y su diseño es limpio y neutro.
código fuente:
Resultado:
Layout HTML/CSS bàsic. (20%)
- Plantilla html
Realitza una plantilla de fitxer HTML:
Desde el archivo style.css enlazado al html y he hecho un importe de los demás dentro de style:
la estructura de carpetas del proyecto:
variable.css
layout.css
textura.css
fonts.css
componentes.css
reset.css
Interfaz sencilla completa:
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.
Coavaluació. (10%)
- En aquest apartat hem de fer l'avaluació de com a mínim 3 companys de classe. Aquesta puntuació és únicament per la persona que fa l'avaluació, és a dir, el company o companya avaluat/ada, no tindrà cap repercusió a la nota, de les coavaluacions que puguin fer els companys sobre ells. Aquesta coavaluació s'ha d'omplir en el següent formulari de Google. Cadascú ha d'omplir 3 vegades el formulari, una per company o companya que del que es faci l'avaluació.