-
Búsqueda y selección de la paleta de colores accesible. (20%)
1.1. ¿Qué hace que una paleta de colores sea accesible? (Contraste cromático WCAG AA/AAA).
Una paleta de colores es accesible cuando el contraste entre el texto y el fondo permite leer comodamente el contenido, incluso para personas con dificultades visuales. Según las directrices WCAG 2.1, el contraste mínimo recomendado es:
-
-
AA: relación mínima 4.5:1 para texto normal.
-
AAA: relación mínima 7:1 para mejor legibilidad.
-
1.2. Explica la selección de colores que has elegido. Elige 2-3 colores. (adjunta capturas de la paleta)
He escogido estos tres colores porque quedan equilibrados y dan un aspecto limpio y moderno a la página.
-
-
El azul (#1877F2) es un color intenso que destaca y da vida a los principales elementos.
-
El azul claro (#E7F3FF) sirve como fondo suave, que hace que el texto se lea bien y no cansa la vista.
-
El negro suave (#1C1E21) lo utilizo para el texto porque tiene muy buen contraste y mantiene una buena legibilidad.
-
1.3. Usa la herramienta Color Contraste Checker o WebAIM Contraste Checker para evaluar el contraste de la paleta de colores. Adjunta la imagen resultante.
2. Selecció de textura o patró de fons. (20%)
2.1. 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 elegido la textura “Subtle Prism”, que es un patrón en formato SVG compuesto por formas geométricas muy suaves y difuminadas.
El motivo por el que la he escogido es porque aporta profundidad y movimiento al fondo sin saturar la página, manteniendo un diseño limpio y moderno. y también encaja perfectamente con mi paleta de colores.
-
- Una página está saturada cuando el fondo tiene demasiados colores, formas o contrastes que dificultan la lectura o distraen al usuario.
2.2. 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 obtenido de la página SVG Backgrounds, es una pagina que ofrece patrones en formato SVG gratuitos.https://www.svgbackgrounds.com/
-
- Codigo css:
- Codigo css:
2.3. Adjunta captura resultant de la pàgina amb la textura de fons, el header i el footer.
-
Elecció de font accessible. (10%)
3.1. 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
-
He escogido Poppins porque su diseño es equilibrado y fácil de leer, ideal para páginas con fondos claros como la mía.
-
-
Captura del codi CSS adjuntant la font.
-
-
Layout HTML/CSS bàsic. (20%)
4.1. Realitza una plantilla de fitxer HTML amb divs per header, menú, main, footer, etc.
En el index he puesto un título en header, y en main he puesto un h1, p, y un button para ver como queda, puesto footer
4.2. 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: Lo he puesto para eliminar los estilos por defecto
-
colores.css: Contiene los colores
-
header.css: Contiene el estilo de header de la página
-
main.css: Contiene el estilo de main de la página
-
footer.css Contiene el estilo de footer de la página
-
fuentes.css Contiene fuentes de la página
-
4.3. 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%)
5.1 Adjuntar la carpeta del projecte HTML i CSS en format .zip sota el nom: F2_Cognom_Nom.zip