La primera parte de la clase de hoy la dedicamos a continuar con el ejercicio que comenzamos ayer, misma dinámica que con la que empezamos hace unos días atrás, todos los trabajos los subimos a un drive de una carpeta que el profesor nos facilitó y subimos nuestro trabajo para que los revisara en vivo para la clase.
En mi caso le puse un par de features adicionales los cuales consistían en crear una caja que ocupara las 3 columnas del layout y un efecto de «zoom» al pasar el mouse por encima de cada imagen, lo que técnicamente se llama el estado de hover.
Pasando la etapa de revisión, comenzamos con la clase del día de hoy que trataba la creación de botones y vínculos.
Etiqueta <a> o vínculo
Tiene como mínimo el atributo “href” o enlace al documento que se va a cargar, es decir la URL y es obligatorio, también puede tener el atributo “target” que si es “_blank” abre una pestaña nueva y si es “self” abre en la misma pestaña. El atributo “download” descarga el elemento del vínculo en lugar de abrirlo.
Rutas relativas o absolutas
Con el ejercicio de hoy justamente me equivoqué en poner correctamente las rutas, así que en la clase el profesor mostró la forma correcta de ponerlas. A la hora de indicar una URL, generalmente se puede hacer de varias formas:
Cómo crear botones
Podemos crear un botón utilizando una etiqueta <a> a la que le pondremos un enlace “href” y una class=”boton” y a la cual le daremos diferentes estilos, por ejemplo, le asignaremos una tipografía con su respectivo color, un color de fondo o un borde con grosor determinado (en caso de un botón fantasma, el cual idealmente sea sólido), un margen en caso de enlistar varios botones hacia el lado como en la actividad que hicimos.
Una característica que se le puede añadir es el :hover, es decir, que al pasar el cursor por encima del botón, éste cambie en alguna de sus características, casi siempre es el color el que se escoge cambiar.
Luego de la clase, se nos indicó cual era la actividad relacionada que consistió en realizar 4 tipos de botones: sólido rectangular, sólido con bordes redondeados, botón fantasma y un botón con gradiente de color. A todos había que aplicarles :hover para hacer notar cuando el cursor pasa por encima de ellos.
https://pinguinodigital.com/blog/como-hacer-un-boton-html-con-link/
Conclusión
La clase nuevamente estuvo muy cargada con mucha información que procesar, lo bueno es que el enfoque estuvo mucho más efectivo (al concentrarnos en un elemento en concreto) y eso facilitó la comprensión a nivel general del tema, para mi fortuna el «dolor» que he tenido con esta parte del curso ha sido casi nulo producto del conocimiento preexistente lo que me ha permitido servir de guía para mis compañeros y es una sensación muy agradable.