Resumen 19/05/2020

Hola a tod@s!!!

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

 

Hoy hemos revisado el ejercicio de ayer acerca del elemento de input en el header. Hemos encontrado una solución que funciona de forma aislada, pero sigue dando problemas al momento de incorporarla en el código prexistente.  En este artículo, que nos ha pasado Dolors, hay una posible solución: https://www.campusmvp.es/recursos/post/como-usar-position-sticky.aspx

 

Os paso aquí el ejercicio original de codepen: https://codepen.io/WebDevSimplified/pen/pxLOVp

La solución que encontrado en un artículo: https://www.includehelp.com/code-snippets/make-a-header-with-logo-and-search-bar-using-html-and-css.aspx  y una variante parecida que he encontrado en el W3School: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_searchbar

 

He subido en el campus mi versión modificada “Sticky2”, sin el box de búsqueda, y su correspondiente CSS “style2” más el código de la solución aislada “Test_header”.

 

Hablando sobre varios temas, hemos tocado el de las anclas, y el Juan Carlos sugería de utilizarlas el ejercicio para crear una barra superior, bajo del header, con las letras del alfabeto haciendo que al clicar en una de las letras se visualice el apartado correspondiente a esa letra (si no es claro, no os preocupéis mañana volveremos a hablar de ello).

Por si alguien no se acuerda aquí el enlace al w3school: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor

 

De ahí hemos llegado a la posibilidad de que el input de búsqueda funcione como un motor de búsqueda interno de la página, o bien como filtro de información.

En este ejemplo del W3School hay un ejemplo de como implementar esta función. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_list

Como se ve en el ejemplo hay que utilizar JavaScript. Es verdad que todavía no hemos estudiado el JavaScript, pero ha llegado el momento de empezar a utilizar trocito de código para ir familiarizando con el js. Así que, aunque no tenemos suficientes conocimientos para entender cómo funciona, si que podemos entender a que sirve un bloque de código js y como posicionarlo en el código de la página. Esto nos ayudará a ir familiarizando con el js.

 

Aquí abajo os paso algunos enlaces útiles sobre input search y otras info útiles del W3school:

 

-          https://www.w3schools.com/jsref/dom_obj_search.asp

-          https://www.w3schools.com/whatis/whatis_htmldom.asp

-          https://www.w3schools.com/whatis/

 

Para hoy esto es todo 😊

Hasta mañana!!!