Resumen 04/05/2020

Hola a tod@s!!!

Un pequeño resumen para l@s que no han podido participar hoy! 😊

Hoy hemos visto la pagina de Juan Carlos y las implementaciones de los conceptos de responsive aplicados a ella. ¡Buen trabajo! 😊

Después hemos analizado en detalle el código del ejercicio de Dolors que ha hecho una página responsive con menú horizontal - con texto - en versión desktop, menú horizontal de iconos para versión Tablet y menú desplegable para la versión móvil. Han salido muchas informaciones útiles para la codifica del menú desplegable y hemos revisado algunas definiciones de propiedades asociadas a elementos hijos. Child and Sibling Selectors https://css-tricks.com/child-and-sibling-selectors/

Un aspecto importante que siempre hay que tener en cuenta es el de estructurar bien el código y poner comentarios que identifiquen claramente los diferentes bloques de código, para facilitar la revisión y la identificación de fallos. Aunque parece segundario, a la hora de corregir un fallo u optimizar el código, este aspecto es de primaria importancia.

Hemos hablado también de la declaración: “!Important”, ej.:  {display:block !important;}, que está relacionado al concepto de “specificity”, en esto dos artículos se explica que es la “specificity” que es “¡important” y en que situaciones conviene utilizarla 

-          https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

-          https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Specificity_2

-          https://css-tricks.com/when-using-important-is-the-right-choice/

Como paso siguiente para los ejercicios hemos propuesto la creación de un formulario responsive versión desktop/móvil y empezar a mirar como funcionan los filtros de busqueda. Ya que los filtros suelen interactuar con la base de datos, de momento haremos solo una introducción informativa para empezar a entender cómo funcionan. He hecho una búsqueda rápida en internet, pero todo lo que he encontrado utiliza jquery, javascript, php y mysql… así es temprano para programarlos.

Buscando filtros me he encontrado con esta instrucción de css -> img { filter: grayscale(50%);} que es otro concepto, pero puede ser útil 😊 Se trata de filtros de imágenes que permiten manipular la apariencia de una imagen.

-          https://developer.mozilla.org/es/docs/Web/CSS/filter

-          https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_filter_grayscale

Aquí a seguir unas páginas de efectos css que pueden sugerir ideas interesantes:

-          https://animista.net/

-          https://www.minimamente.com/project/magic/

-          http://bouncejs.com/#{s:[{T:%22r%22,e:%22b%22,d:1000,D:500,f:0,t:90,s:3,b:4}]}

-          https://codepen.io/samarkandiy/pen/aOoBXq

Y esto es todo para hoy 😊

Hasta Mañana!!!