fad9100-2024-1
2024-04-19: Segundo encargo
component.gallery
Elementos web
- Hero: Se utiliza para resaltar el contenido más importante de una página. Es el elemento visual más destacado, a menudo contiene una imagen de ancho completo.
En la pagina de elisa.desing sistem se puede encontrar el uso que se le puede dar a este elemento web y el codigo que estan utilizando para cada ejemplo. En esta pagina usan principalmente JSX(react). Por lo que ademas encontre Bulma pagina en la cual lo muestran mas simple con codigo en HTML.
- Imagen: En un portafolio de diseñador la parte mas importante es el mostrar los proyectos, para esto es esencial las imagenes que se colocan y como estas se ordenan.
Estas imagenes son de Gestalt y nos muestran distintas maneras de colocar imagenes, con texto encima, superposiciones o que las imagenes se adapten al margen que las contiene. Ademas de mostrarnos el codigo con el cual se realizo el ejemplo. Tambien esta la pagina de Bulma la cual muestra mas opciones para hacer con las imagenes, pero (a mi parecer) es mas amigable y con ejemplos mucho mas simples que la primera página.
- Menú desplegable: Es una pila vertical de encabezados interactivos utilizados para activar la visualización de más información; cada elemento puede ser ‘colapsado’ con sólo una etiqueta corta visible o ‘expandido’ para mostrar el contenido completo.
Pensando en el portafolio se podría colocar un menu desplegable, para ver algunos “tags” o los nombres de los trabajos o alguna otra manera de buscar, en verdad se le pueden dar varios usos. Encontre estas dos paginas Base web y Crayons ambas muestran distintos ejemplos de estos menus de acordeon, ademas de tener los codigos con los cuales fueron realizados.
- Pie de página: Es un elemento de la interfaz del sitio web y puede servir como contenedor principal para información clave para el ´portafolio, como navegación de utilidad, enlaces legales, notificaciones o enlaces a redes sociales.
Los pies de página ayudan a las personas a poder contactarse mas fácilmente, ademas de dar información importante. para este elemento encontré la página de Helsinki en la cual nos muestra diferentes ejemplos, el codigo que utilizan y las propiedades del codigo.
Elementos adicionales
Encontre algunas cosas que nos podrian ser utiles, pero nose si sean elementales para la creacion del portafolio, aun asi de igual manera lo queria colocar.
- Breadcrums: Es un esquema secundario de navegación que revela la ubicación del usuario en una aplicación.
Esta la pagina de Adobe Spectrum en la cual se muestran diferentes ejemplos, el codigo en css y o que se debe y no hacer con el elemento. Tambien esta la pagina de Web Base donde nos muestran el codigo y mas ejemplos.
- Tag: Este elemento sirve para mostrar una colección de información concisa.
Los tags sirven para poder encontrar la informacion de manera mas precisa y rapida, ademas que en la pagina de Web Base nos muestran varios ejemplos acompañados de sus codigos.
- Carga de archivos: Es una zona donde arrastar los archivos para subirlos a la pagina web.
La pagina web de Web Base muestra varios ejemplos y sus respectivos codigos.