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).
Una paleta es accesible cuando cumple los estándares de contraste de las Pautas de Accesibilidad en el Contenido Web:
Contraste mínimo WCAG:
Texto normal: 4.5:1
Texto grande: 3:1
Contraste WCAG :
Text normal: 7:1
-
Explica la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta)
He elegido una paleta de tres colores que dan un buen contraste para textos y elementos interactivos:
Azul oscuro: #0D1B2A para el texto principal sobre fondos claros.
Verde suave: #2EC4B6 Sirve para elementos destacados como botones o enlaces.
Crema: #F5EBD0 Perfecto como fondo principal. Proporciona un excelente contraste con el azul oscuro y el verde suave para detalles.
-
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?
Foreground color:#f5ebd0
Background color:#56496a
He escogido un patrón SVG suave de líneas diagonales muy finas para el fondo de la página. Este patrón es discreto y no compite con los principales contenidos (texto, botones o imágenes).
-
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 extraido en https://heropatterns.com/
La he añadido a la pagina mediante el css que proporciona la misma pagina al crear la textura
-
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 elegido usar la fuentre Roboto ya que tiene una buena estetica y es facil de leer.
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.
Aqui se puede ver como estan todos los css enlazados.
-
Adjunta una captura de pantalla (o diverses) de l'estructura de carpetes del projecte on es vegin els diferents CSS, HTML, etc.
Aqui se puede ver la estructura de carpetas del proyecto.
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.