(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_750,h_350/https://antrax-labs.org/wp-content/uploads/2023/04/heading-of-qa-automation-what-is-it-and-why-do-you-need-it-750x350.jpg)
Hola a todos! A pedido de varios miembros que están empezando en el mundo de la informática, he decidido hacer este glosario en donde iré dejando un listado de componentes web y mobile, con sus respectivos nombres, y para que se utiliza cada uno. Esto es con el fin de que puedan tener un mejor vocabulario de la jerga informática.
Glosario de Componentes WEB(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_661/https://antrax-labs.org/wp-content/uploads/2023/04/input.png)
Input – Field: Campo para insertar caracteres
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1536/https://antrax-labs.org/wp-content/uploads/2023/04/Tabla-1536x705.png)
Tablas: Las tablas pueden tener distintos diseños, pero básicamente son para acomodar datos
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_391/https://antrax-labs.org/wp-content/uploads/2023/04/notificaciones-1.png)
Notificaciones: Aparecen cuando recibimos alguna actualización dentro del sistema
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_600,h_338/https://antrax-labs.org/wp-content/uploads/2023/04/bootstrap-accordion-menu-with-plus-minus-icon.gif)
Acordión: Es un componente que permite expandirse/contraerse para mostrar información ahorrando espacio en la web
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1140/https://antrax-labs.org/wp-content/uploads/2023/04/cards-1140x610.png)
Cards – Tarjetas: Son cuadros o rectángulos con información. Muy vistos en blogs
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_750/https://antrax-labs.org/wp-content/uploads/2023/04/checkbox-750x273.png)
Checkbox: Es un componente clickeable, que sirve para marcar un elemento
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1012,h_605/https://antrax-labs.org/wp-content/uploads/2023/04/modal.gif)
Modal: Es una especie de cartel que aparece luego de tocar un botón o link y que muestra alguna información.
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_459,h_274/https://antrax-labs.org/wp-content/uploads/2023/04/tabs.gif)
Tabs: Son solapas o pestañas. Se pueden cambiar entre ellas, y cada una de ellas mostrará una información distinta
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_393/https://antrax-labs.org/wp-content/uploads/2023/04/paginacion.png)
Paginación: Sirve para pasar a la siguiente página de un listado. Muy visto en tablas así como también en blogs
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_768/https://antrax-labs.org/wp-content/uploads/2023/04/progress-bar-768x248.png)
Progress Bar o Barra de progreso: Es una barra que muestra el avance de carga de algo del sitio web
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_391,h_146/https://antrax-labs.org/wp-content/uploads/2023/04/spinner2.gif)
Spinner: Es un elemento que nos indica que el sitio web esta cargando
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_500,h_387/https://antrax-labs.org/wp-content/uploads/2023/04/tooltip.gif)
Tooltip: Aparece cuando ponemos el mouse sobre algún elemento. Sirve para mostrar algún tipo de información de uso de ese elemento
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_494,h_316/https://antrax-labs.org/wp-content/uploads/2023/04/popover.gif)
Popover: Es similar a un tooltip, solo que tiene una especie de título en la parte superior, y luego una explicación del componente
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_768/https://antrax-labs.org/wp-content/uploads/2023/04/Formulario-768x478.png)
Form – Formulario: Es utilizado para colocar información y almacenarla en la base de datos, o también muy utilizado en los sitios webs como formularios de contacto
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_800,h_600/https://antrax-labs.org/wp-content/uploads/2023/04/radio.gif)
Radio Button: Sirve para seleccionar una opción de un listado. A diferencia del checkbox, este solo permite seleccionar 1 sola opción, mientras que en el checkbox se pueden seleccionar varias
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_456,h_410/https://antrax-labs.org/wp-content/uploads/2023/04/dropdowns.gif)
Dropdown – Select – ComboBox: Es un elemento desplegable que muestra varias opciones adentro
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_490,h_381/https://antrax-labs.org/wp-content/uploads/2023/04/multiselect2.gif)
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_600,h_338/https://antrax-labs.org/wp-content/uploads/2023/04/multiselect1.gif)
Multiselect: A diferencia del select común o dropdown, este permite seleccionar varios items de un desplegable
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_526/https://antrax-labs.org/wp-content/uploads/2023/04/grafico-de-arana.png)
Gráfico de araña – Radar chart: Permite graficar una tendencia
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_768/https://antrax-labs.org/wp-content/uploads/2023/04/grafico-burbuja-768x452.png)
Grafico de burbuja
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_768/https://antrax-labs.org/wp-content/uploads/2023/04/grafico-de-barras-768x458.png)
Gráfico de barras
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_768/https://antrax-labs.org/wp-content/uploads/2023/04/Grafico-de-torta-768x498.png)
Gráfico de torta
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_753/https://antrax-labs.org/wp-content/uploads/2023/04/Grafico-lineal.png)
Gráfico Lineal
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_591/https://antrax-labs.org/wp-content/uploads/2023/04/boton.png)
Botón
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_433,h_145/https://antrax-labs.org/wp-content/uploads/2023/04/switch.gif)
Switch – Pildora – Toggle: Es un elemento que permite encender o apagar algo
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_800,h_600/https://antrax-labs.org/wp-content/uploads/2023/04/toast.gif)
Toast (tostada): Es un tipo de notificación web
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_679/https://antrax-labs.org/wp-content/uploads/2023/04/placeholder.png)
Placeholder: Son las palabras grises que aparecen dentro de los input de un formulario, y que sirven como guía para saber que completar dentro de dicho input
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_2048,h_1160/https://antrax-labs.org/wp-content/uploads/2023/04/popup.gif)
Popup: Es cuando clickeamos un link o imagen, y se nos abre una nueva página con publicidad. (muy visto en páginas de descargas o videos)
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_375,h_500/https://antrax-labs.org/wp-content/uploads/2023/04/hamburguesa.gif)
Menú Hamburguesa: Es un menú que puede colapsarse. Muy visto en sitios responsives (que se adaptan a teléfonos móviles)
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1140/https://antrax-labs.org/wp-content/uploads/2023/04/label-1140x738.png)
Label: El texto que aparece en cualquier sitio web
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_486/https://antrax-labs.org/wp-content/uploads/2023/04/leyenda.png)
Leyenda: Es el texto que aparece al posicionar el mouse sobre algún elemento
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_886,h_800/https://antrax-labs.org/wp-content/uploads/2023/04/Breadcrums.jpg)
Breadcrumb – Migajas de pan: Hacen referencia desde donde llegamos a la página que estamos viendo actualmente
Glosario de Componentes Mobile(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_800,h_600/https://antrax-labs.org/wp-content/uploads/2023/04/burguer.gif)
Menú Hamburguesa: Al igual que en los sitios webs responsives, el menú hamburguesa también aparece en las aplicaciones mobile.
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_800,h_600/https://antrax-labs.org/wp-content/uploads/2023/04/splash.gif)
Splash: Es la pantalla de inicio cuando abrimos una aplicación. Suele mostrar una breve presentación o el logo de la app por unos segundos
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1120,h_660/https://antrax-labs.org/wp-content/uploads/2023/04/iOS12_1120x660_190325_133100.gif)
Push Notifications: Notificaciones emergentes (Cuando una aplicación nos envía una notificación)
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_425/https://antrax-labs.org/wp-content/uploads/2023/04/swipe.png)
Swipe: Es cuando deslizamos en la pantalla (Puede ser cuando desbloqueamos el teléfono, cuando pasamos fotos, o cuando scrolleamos)
Gestos táctiles en pantallas móviles(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1459/https://antrax-labs.org/wp-content/uploads/2023/04/gestos.png)
Esto es todo por ahora. Si se me ocurren más, los iré agregando a este mismo glosario, o si quieren sugerir algunos más, pueden hacerlo en los comentarios y los agrego!
Espero que les sirva!
ANTRAX
Increíble aporte. Muchísimas gracias!!!!
Dejo un sitio con varios componentes web funcionales para interactuar con los mismos! (Tengo entendido que sirve para jugar con postman al ser funcionales)
https://the-internet.herokuapp.com/ (https://the-internet.herokuapp.com/)
Salutes!
Muy bueno el glosario! Es muy útil.
Gracias por el post !!
Gracias, siempre es util tener ésto a mano. ;D