F2_AlcalaJoel

F2_AlcalaJoel

von Joel Alcala Arriero -
Anzahl Antworten: 0

 

Forum 2- Creación de una interfaz sencilla y 

accesible

 

  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 de colores es acesible cuando tiene suficiente contraste entre el texto y el fondo, según los estándares WCAG.

Esto permite que el contenido se pueda leer y distinguir bien, incluso para personas con problemas de visión (Daltónicos como yo e.e).

  • Explic la selecció de colors que has triat. Tria 2-3 colors. (adjunta captures de la paleta)

He elegido una paleta beige y marrones suaves porque era el color de ropa que llevaba en ese momento cuando lo pensaba.

Los colores principales son:

Fondo: #F5EBD0 (beige claro)

blobid0.png

Texto: #3B3B3B (gris oscuro)

blobid1.png

 

Detalles: #B58B5C (marrón cálido)

blobid2.png

 

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

blobid3.png

  1. 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 expica el motiu. Què significa saturar una pàgina a nivell de textura?

blobid4.png

He elegido esta textura SVG porque, al ver en HeroPatterns que podía generar mis propias texturas, me puse a probar distintos patrones y a modificar tanto los colores como la opacidad. Me parecía más interesante que simplemente descargar una textura ya hecha. El resultado es una textura con un patrón SVG que no satura la página y que combina perfectamente con la paleta de colores beige que estoy utilizando en esta actividad.

 

Foreground color: #F5EBD0

Background color: #E0D1B5

y reducción de la opacidad

 

  • Què significa saturar una pàgina a nivell de textura?

 

A nivel de textura, saturar una página significa usar patrones demasiado fuertes o cargadas que llaman más la atención que el propio contenido,interfiriendo con el contenido que se pretende mostrar llegando incluso a molestar a la vista, dejando de ser un simple fondo y se convierte en una distracción.

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

He obtenido la textura de la página HeroPatterns, una web que permite generar texturas SVG personalizados. Allí seleccioné un patrón suave y lo ajutsté para adaptarlo a mi paleta.

 

https://heropatterns.com //Crear tu porpia textura

 

blobid5.png

 

Para añadir la textura a mi página web utilicé el código CSS que genera HeroPatterns al crear la textura personalizada. Ese código incluye tanto el color como el patrón SVG. Simplemente copié el código y lo añadí dentro del body de mi archivo CSS.

blobid6.png

(Style base que más tarde he tenido que modularizar)

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

 

blobid7.png

  1. 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 el qual l’heu triat i captura del codi CSS adjuntant la font.

blobid8.png

Para esta pagina he elegida la fuente “Lato”, del listado de Google Fonts Accessible, porque es una letra sencilla que combina con los tonos beige de la web

blobid9.png

 

  1. 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 CSS general i la resta d’arxius d’estils.

 

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

Estructura de carpetas

blobid10.png

colors.css

Definimos las variables de los colores de la página. es la paleta de colores que usamos para el resto de css

blobid11.png

fonts.css 

Donde guardamos la tipografía de la web, aplicamos la fuente o fuentes que utilizaremos para la página web

blobid12.png

layout.css 

El css que le da el estilo principal a la pagina definiendo toda la estructura visual

blobid13.png

reset.css 

Añadimos las reglas formadas por el señor Eric Mayer, tambien es su codigo el que yo mismo utilizo en la pagina web.

blobid14.png

styles.css 

El CSS general, no suele tener estilos propios, su unica funcion es la de importar todos los archivos CSS de la pagina web

blobid15.png

textures.css

Aqui va el fondo o fondos con textura utilizados en la pagina web, en mi caso la textura con patron SVG sacada de HeroPatterns

blobid16.png

 

  1.  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 fill 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.


(EN EL ARCHIVO ADJUNTO HE TENIDO QUE QUITAR LAS IMAGENES POR EL TAMAÑO A LA HORA DE SUBIRLO WEB COMPLETA EN EL DRIVE)